無法複製img使用畫布

Question

我有一個PNG驗證碼圖像，我想創建一個副本，以消除它的透明度，因爲然後驗證碼解析器（ocrad.js）函數工作。

但問題是，以下功能幾乎正常工作，但captcha圖像被移動和調整大小。

如何保持驗證碼圖像的維度相同？

我試着將canvas寬度設置爲與img元素相同，但是不起作用。

function copy(pic) { 

    var canvas = document.createElement('canvas'); 

    var context = canvas.getContext('2d'); 

    context.fillStyle = '#fff'; /// set white fill style 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    context.drawImage(pic, pic.width, pic.height); 
    var dataURL = canvas.toDataURL(); 
    document.getElementById('cimage').src = dataURL; 

    alert(OCRAD(document.getElementById('cimage'))); //decode it 
} 

所以，如果我在this page進入谷歌Chrome瀏覽器的控制檯下面的代碼，你會看到驗證碼圖片（在中心）移動的地方是我不想要的東西：

pic = document.getElementById('cimage'); 
var canvas = document.createElement('canvas'); 

canvas.width = pic.width; 
canvas.height = pic.height; 

var context = canvas.getContext('2d'); 

context.fillStyle = '#fff'; /// set white fill style 
context.fillRect(0, 0, canvas.width, canvas.height); 

context.drawImage(pic, pic.width, pic.height); 
var dataURL = canvas.toDataURL("image/jpeg"); 
document.getElementById('cimage').src = dataURL; 

Answer 1

繪製圖像前設置畫布元素大小。元素的默認大小爲300x150像素：

var canvas = document.createElement('canvas'); 
canvas.width = pic.width; 
canvas.height = pic.height; 

此外，您使用的drawImage錯了 - 兩個第一參數是位置，而不是規模。由於使用上面的代碼，畫布已經是正確的尺寸，因此您只需將圖像放在原點（0，0）即可：

context.drawImage(pic, 0, 0);