将 html img 元素转换为 canvas

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）转换为 canvas 元素，使用 javascript 作为

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);    
}

结果 canvas 的大小为 1600 * 900，而不是 796 * 448。我希望 canvas 的大小为 796 * 448。

如果我将 canvas 的高度和宽度设置为

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

canvas 的尺寸变为 796 * 448，但图像被裁剪

是否有任何解决方案可以从 img 元素创建一个 canvas，其宽度和高度与 img 元素的宽度和高度完全相同，而不裁剪图像？

Answer 1

你可以用 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 2

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

Answer 3

您没有正确使用 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://via.placeholder.com/1600x900" style="max-width: 100%; height: auto;" />
</div>

将 html img 元素转换为 canvas

Convert html img element to canvas

html

javascript

css

jquery

html5-canvas