ctx.drawImage僅繪制圖像的一半

Question

我正在嘗試加載圖像，然后將其繪制到畫布上，但目前我僅設法渲染一半圖像：

 var image = new Image(); image.crossOrigin = 'Anonymous'; image.onload = function() { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0); canvas.style.position = 'absolute'; canvas.style.top = 0; canvas.style.left = 0; document.body.appendChild(canvas); } image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg'; 

有人看到上面有什么問題嗎？ 任何建議將非常有幫助！

Answer 1

因為畫布尺寸小於圖像

只需將畫布大小設置為所需的大小，即可看到所有圖像。

 let image = new Image(); image.crossOrigin = 'Anonymous'; image.onload = function() { let canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; let ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0); document.body.appendChild(canvas); } image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg'; 

---

順便說一句，您可以在CSS中設置尺寸，而您仍然具有相同的畫布尺寸（CSS只是將其拉伸）。

 //same code above let image = new Image(); image.crossOrigin = 'Anonymous'; image.onload = function() { let canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; let ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0); document.body.appendChild(canvas); } image.src = 'https://s3.amazonaws.com/duhaime/blog/visualizations/word-to-viz/heightmap.jpg'; 

 canvas{width:200px; height:100px;}