Question

这是我第一次使用canvas，我正在使用它从HTML文档中抓取图像并将它们放入画布中，这样我就可以使用Javascript为它们添加效果了。我的代码有效但创建了副本。我想用新的画布图像替换原始图像，但我尝试的任何东西都会使画布或所有图像完全从页面中消失。任何建议都会很棒！有人还建议我把画布图像放在原版的顶部，但我似乎无法到达那里......

以下是我创建画布的代码：

var img = this[0]; // grab the first one, shake the jquery
var imgWidth = this.width();
var imgHeight = this.height();

var canvas = $("<canvas>");

// set the acutal w and h
canvas[0].width = imgWidth;
canvas[0].height = imgHeight;

var ctx = canvas[0].getContext('2d');

// dump the image into the canvas
console.log(ctx);
ctx.drawImage(img,0,0, imgWidth, imgHeight);

var pixels = ctx.getImageData(0,0, imgWidth, imgHeight);
var data = pixels.data;

Answer 1

如果this[0]是您的图片元素，请使用：

$(this[0]).parent().html(canvas[0])

Answer 2

对于大多数打算和目的，可以使用<canvas> HTML节点代替<img>。但是当您希望HTML <img>节点显示画布的内容时，有一种方法可以执行此操作。

将画布的当前内容转换为带有var dataURL = canvas.toDataURL();
使用image.src = dataURL;

用画布图像替换图像

2 个答案: