Hi, I am a newbie on JS and was trying to do alpha blending without a
full success for a couple of days. The code is here:
var img1 = document.getElementById('foreground');
var img2 = document.getElementById('background');
var canvas = document.getElementById("result");
var context = canvas.getContext("2d");
var width = img1.width;
var height = img1.height;
canvas.width = width;
canvas.height = height;
var alpha = 0.5;
var pixels = 4 * width * height;
// get foreground image data
context.drawImage(img1, 0, 0);
var image1 = context.getImageData(0, 0, width, height);
var imageData1 = image1.data;
// get background image data
context.drawImage(img2, 0, 0);
var image2 = context.getImageData(0, 0, width, height);
var imageData2 = image2.data;
// alpha blending
while (pixels--) {
imageData1[pixels] = imageData1[pixels] * alpha +
imageData2[pixels] * alpha;
}
// send the result to canvas
image1.data = imageData1;
context.putImageData(image1, 0, 0);
I found that Safari displays blended image just fine. However in
Chrome, the line on context.getImageData triggered the following error
message:
58 Uncaught Error: SECURITY_ERR: DOM Exception 18
Thank you very much in advance,
Jane
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/jsmentors@jsmentors.com/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/jsmentors@googlegroups.com/
To unsubscribe from this group, send email to
jsmentors+unsubscr...@googlegroups.com
