转换HTML img元素帆布

Question

我有html页面内容

<div class="span12"> 
    <img id="myImg" src="myImage.png" style="max-width: 100%; height: auto;" /> 
</div> 

其中myImage.png实际尺寸1600 * 900。图像的尺寸为796 * 448（保持纵横比的拉伸）。

我想给img元素转换（大小为796 * 448）使用javascript一个canvas元素

function convertImgToCanvas(){ 
    var myImgElement = document.getElementById("myImg"); 
    var myCanvasElement = document.createElement("canvas"); 
    myCanvasElement.width = myImgElement.width; 
    myCanvasElement.height = myImgElement.height; 
    var context = myCanvasElement.getContext('2d'); 
    context.drawImage(myImgElement,0,0);  
} 

产生的画布的大小1600 * 900，不796 * 448。我期待画布的大小为796 * 448。

如果我设置高度和画布的宽度

myCanvasElement.width = '796px'; 
myCanvasElement.height = '448px'; 

画布的大小成为796 * 448，但图像被裁剪

是否有任何解决方案来创建一个canvas从img元件，具有恰好与img元素相同的宽度和高度，而不裁剪图像？

Answer 1

您没有正确使用drawImage。在这里看到：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

第三个例子允许你指定的x，y，宽度和两个源的高度参数和目标：ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

所以你的情况最简单的解决将是这样的：

context.drawImage(myImgElement, 0, 0, 1600, 900, 0, 0, 796, 448); 

这里，它是在行动（去整页，因为大小）：

function convertImgToCanvas(){ 
 
    var myImgElement = document.getElementById("myImg"); 
 
    var myCanvasElement = document.createElement("canvas"); 
 
    // don't forget to add it to the DOM!! 
 
    document.body.appendChild(myCanvasElement); 
 
    myCanvasElement.width = 796; 
 
    myCanvasElement.height = 448; 
 
    var context = myCanvasElement.getContext('2d'); 
 
    context.drawImage(myImgElement, 0, 0, 1600, 900, 0, 0, 796, 448); 
 
    // remove the image for the snippet 
 
    myImgElement.style.display = 'none'; 
 
} 
 

 
convertImgToCanvas();

<div class="span12"> 
 
    <img id="myImg" src="https://upload.wikimedia.org/wikipedia/commons/0/08/Ice-and-Fire-showdown_1600x900.jpg" style="max-width: 100%; height: auto;" /> 
 
</div>

Answer 2

您可以使用scale。

function convertImgToCanvas(){ 
    var myImgElement = document.getElementById("myImg"); 
    var myCanvasElement = document.createElement("canvas"); 
    myCanvasElement.width = myImgElement.width; 
    myCanvasElement.height = myImgElement.height; 
    var context = myCanvasElement.getContext('2d'); 
    context.scale(myCanvasElement.width/myImgElement.width, myCanvasElement.height/myImgElement.height); 
    context.drawImage(myImgElement, 0, 0); 
} 

Answer 3

查看下面给出的链接。您可以将图像转换为HTML5 canvas元素： http://lab.abhinayrathore.com/img2canvas/