用 canvas 图片替换图片

Question

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

这是我创建 canvas 的代码：

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

A <canvas> HTML 节点可用于代替 <img> 用于大多数意图和目的。但是当你想让一个HTML<img>节点显示一个canvas的内容时，有一种方法可以做到这一点。

用var dataURL = canvas.toDataURL();
使用 image.src = dataURL;

用 canvas 图片替换图片

Replace image with canvas image

javascript

jquery

html5-canvas