javascript - 操作した ImageData を imageObject に格納します。Javascript

Question

画像をロードし、たとえば 2 回コピーして、他の 2 つの画像を操作したいと考えています。どういうわけか、2 つのクローンを使用して「後処理」を行いたいと考えています。キャンバスのパーツを取得して操作したくありません。私はリアルタイム 2D ゲームをプログラミングしていますが、すべてのフレーム内のすべての画像を操作するのは狂気の沙汰です。私が見つけた解決策の多くは、キャンバスから部分を「切り取り」、それらを処理し、キャンバスに書き戻すことでした。しかし、操作された画像を imageObjects に格納して、「実際の」画像であるかのように直接描画できるようにしたいと考えています。

Answer 1

キャンバスは、依然として画像を操作する最良の方法です。取得したキャンバス スライスは(キャンバスを使用したピクセル操作を参照)context.getImageData()を介してペイントすることができるため、画像データを画像に変換することの実際の利点はわかりません。ただし、「実際の」画像オブジェクトを使用したい場合は、この URL で画像オブジェクトを使用および作成できます。これらの行に沿ったもの：context.putImageData()canvas.toDataURL()

// Create temporary canvas
var canvas = document.createElement("canvas");
canvas.setAttribute("width", imageData.width);
canvas.setAttribute("height", imageData.height);

// Put image data into canvas
var context = canvas.getContext("2d");
context.putImageData(imageData, 0, 0);

// Extract canvas data into an image object
var image = new Image();
image.src = canvas.toDataURL("image/png");
image.onload = function() {alert("Image object can be used")};