Javascript Chrome未按预期呈现画布数据[JS/canvas API]

我有一个函数，我已经从codegolf上的一个答案改过来了（因为原来的答案实际上不起作用）

基本上，它所做的就是获取图像的像素，将它们置乱，然后将置乱后的图像输出到页面上

以下是我的代码：

文件
img{
最小宽度：500px；
最小高度：500px；
}
函数加扰（el）{
“严格使用”；
var V=document.createElement（'canvas'）；
var W=V.width=el.width，
H=V.高度=el.高度，
C=V.getContext（'2d'）；
C.drawImage（el，0，0）；
var id=C.getImageData（0,0,W,H），
D=id数据，
L=D.长度，
i=L/4，
A=[]；
对于（；--i；）A[i]=i；
函数S（A）{
var L=A.长度，
x=L>>3，
y、 t，i=0，
s=[]；
如果（L<8）返回A；
对于（；i>2]*4）+（i%4）]；
C.putImageData（N，0，0）；
el.src=C.canvas.toDataURL（“image/jpeg”，1.0）；
}
加扰（文档查询选择器（“img”）；

尝试在

元素的

加载事件中调用
扰码

document.querySelector("img").onload = function() {
   scramble(this)
};

提供的代码
document.querySelector（“img”）.onload=function（）{
扰乱（这个）
};
使图像非常快速地进行置乱和解读。
它不会创建静态加扰渲染。
此外，代码的缺失使Chrome
显示原始文件的静态形式
解读图像。
虽然没有CORS数据，但它是正在加载的本地图像…？您是否尝试在
元素的
加载事件中调用
扰码
？它工作了！。。。为什么需要触发onload事件呢？解析器应该在执行脚本之前将图像渲染到DOM中，不是吗？当调用
扰码
时，
可能无法完全加载。接受来宾的回答，它回答了这个问题