2
私はcodegolfの回答から変更した機能を持っています（元の回答は実際には機能しなかったので）。Chromeはキャンバスデータを期待どおりに描画していません[JS/Canvas API]
基本的には、画像のピクセルを取り込んでスクランブルし、スクランブルした画像をページに出力します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img {
min-width: 500px;
min-height: 500px;
}
</style>
</head>
<body>
<img src="test.jpg" alt="" />
<script>
function scramble(el) {
"use strict";
var V = document.createElement('canvas');
var W = V.width = el.width,
H = V.height = el.height,
C = V.getContext('2d');
C.drawImage(el, 0, 0);
var id = C.getImageData(0, 0, W, H),
D = id.data,
L = D.length,
i = L/4,
A = [];
for (; --i;) A[i] = i;
function S(A) {
var L = A.length,
x = L >> 3,
y, t, i = 0,
s = [];
if (L < 8) return A;
for (; i < L; i += x) s[i/x] = S(A.slice(i, i + x));
for (i = 4; --i;) y = [6, 4, 7, 5, 1, 3, 0, 2][i], t = s[i], s[i] = s[y], s[y] = t;
s = [].concat.apply([], s);
return s;
}
var N = C.createImageData(W, H),
d = N.data,
A = S(A);
for (var i = 0; i < L; i++) d[i] = D[(A[i >> 2] * 4) + (i % 4)];
C.putImageData(N, 0, 0);
el.src = C.canvas.toDataURL("image/jpeg", 1.0);
}
scramble(document.querySelector("img"));
</script>
</body>
</html>、問題が予想されるように、すべてのディスプレイFF、エッジとIEとは異なり、クロムがちょうど示し、クロムである：それはスタンドとしてここ
は私のコードですイメージがあるはずの黒い四角。他のすべてのブラウザが期待どおりに動作しているので、なぜ私の人生のために私は理由を理解できません。
ここには、他のブラウザのスクリーンショットがあり、黒と正方形が表示されています。
あなたが見ることができるように、他のブラウザのすべては大丈夫です、期待通りのクロムは、しかし、ちょうど行いません。また、任意のコンソールエラーを投げるかで動作していないため、目に見える証拠と理由を持っていませんイライラする。
とにかく、質問には、以下のコメントにお尋ねください。
の
loadイベントでscrambleを呼び出して試してみてください、それがロードされているローカルの画像ですか...？ – SkullDev'![]()
'要素の 'load'イベントで' scramble'を呼び出そうとしましたか？ –
guest271314
それは動作します...なぜ、onloadイベントは必要ですが、パーサーはスクリプトを実行する前にDOMにイメージをレンダリングする必要がありますか？ – SkullDev