I am trying to duplicate a PNG captcha image in order to remove its transparency so that the captcha resolver (ocrad.js) function can work properly.
However, I am facing an issue where the duplicated captcha image is being moved and resized.
How can I keep the dimensions of the captcha image unchanged?
I have attempted to set the canvas width to be equal to that of the image element, but it does not seem to resolve the issue.
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
}
If you use the following code in Google Chrome's Console on this page, you will see that the Captcha image (in the center) moves, which is not the desired outcome:
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;