轉換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/