无法使用画布复制图像

Unable to copy img using canvas

本文关键字：复制 图像 布复制      更新时间：2023-09-26

我有一个PNG验证码图像，我想创建一个副本，以便删除它的透明度，因为然后验证码解析器(ocrad.js)函数工作。

但问题是，以下功能几乎正常工作，但captcha图像被移动和调整大小。

如何保持验证码图像的相同尺寸?

我试过将画布宽度设置为与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
}

所以如果我在这个页面上的谷歌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;

在绘制图像之前设置画布元素的大小。元素的默认大小是300x150像素:

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

另外，你使用错误的drawImage -前两个参数是位置，而不是大小。由于画布已经使用上面的代码设置了正确的大小，您只需要将图像放置在原点(0,0):

context.drawImage(pic, 0, 0);
相关文章：