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将canvas元素（大小为796 * 448）转换为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);    
}

生成的画布的大小为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，width和height参数：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/

将html img元素转换为canvas

3 个答案: