1
イメージソースからピクセル化されたキャンバスを生成しようとしていますが、getImageData（）関数の奇妙な動作があります - 私のキャンバスよりも高いイメージ最大高さデータ[最大高さ*最大高さの2乗]だけです。 私はここで行方不明のものは何ですか？キャンバスgetImageData（）。データ戻り値イメージ
function generatePixels(){
const pixel_size = 10;
const x = 0; const y = 0;
const w = temp_ctx.canvas.width;
const h = temp_ctx.canvas.height;
let min_width = w,
min_height = h,
max_width = 0, max_height = 0;
for (var j = y; j < (y+h); j += pixel_size) {
for (var i = x; i < (x+w); i += pixel_size) {
// get current pixel image data (x,y,10,10);
var data = temp_ctx.getImageData(j, i, pixel_size, pixel_size).data;
// draw pixel on rendered canvas
rendered_ctx.fillStyle = '#' + (data[2] | (data[1] << 8) | (data[0] << 16) | (1 << 24)).toString(16).slice(1);
rendered_ctx.fillRect((j + pixel_size), (i + pixel_size), 10, 10);
}
}
}
あなたはここでのコードの例を見つけることができます。 https://codepen.io/AceDesigns/pen/dZEmjZ
密接にはまだ見ていませんが、小さなサーフェスでgetImageDataを複数回実行しないで、全体を一度呼び出して結果を反復処理します。 getImageDataは、ctx2d APIで使用可能な最も重い操作の1つです。 – Kaiido
ループの先頭でy変数としてjを使用しますが、その内部のxにはこれを使用します。 – enhzflep
@kaii私は全体の画像データを取得し、結果をループで実行しようとしましたが、メモリの問題でブラウザがクラッシュする... – AceDesigns