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，翻譯它，更改圖片

回答

相關問題