HTML5 Canvas putImageData，翻译它，更改图片

我想要使用HTML5画布绘制图片，翻译图片，然后更改图片，但保留我制作的转换。这可能吗？HTML5 Canvas putImageData，翻译它，更改图片

下面是一些伪代码来说明我的问题：

// initially draw an image and translate it 
var context = canvas.getContext("2d"); 
context.putImageData(someData, 0, 0); 
context.translate(200, 10); 


// then later somewhere else in code 
// this should be drawn @ 200/10 
var context = canvas.getContext("2d"); 
context.putImageData(someOtherData, ?, ?);

我认为这将有可能通过一些保存/恢复通话，但我没有成功呢，所以我怎么能做到这一点？

来源

2012-08-07 zersaegen

将图像及其关联数据放入自定义数据结构中。例如：

var obj = { 
    imgData: someData, 
    position: [0, 0], 
    translate: function (x, y) { 
     this.position[0] = x; 
     this.position[1] = y; 
    } 
};

现在您可以对imgData及其位置进行连续更新。绘图时使用obj.position[0]和obj.position[1]作为xy坐标。

obj.translate(200, 10);

来源

2012-08-07 15:38:49 bennedich

这里的问题是putImageData不受转换矩阵的影响。

这是由规格的命令：

电流路径，变换矩阵，阴影属性，全局α，剪切区域，和全局合成操作员必须不影响getImageData（）和putImageData（）方法。

你可以做的是putImageData到内存中的帆布，然后

inMemCtx.putImageData(imgdata, 0, 0); 
context.drawImage(inMemoryCanvas, x, y)

到你的正常的画布，翻译将被应用到的drawImage调用。

来源

2012-08-07 17:32:36

谢谢你们。问题是两种方法都需要跟踪我想要避免的x/y坐标。我更喜欢将我所做的所有转换应用于新图像的方式。我想过要获得变换矩阵，设置新图像并将矩阵重新应用到画布上，但这不可能吧？对不起，如果我的第一篇文章误导。 – zersaegen 2012-08-08 08:20:30

有没有办法，从getDataImage创建图像，然后使用drawImage？ – 2017-11-06 18:52:42

HTML5 Canvas putImageData，翻译它，更改图片

回答

相关问题