有没有童鞋遇到过同样的问题：下面的for循环不起作用？跪求！

Question

要读取某网页，然后将这个网页的图片做裁剪处理，单个图片处理没有任何问题，但是只要把FOR循环放进去，用来批量处理所有图片，就无法读到图片了。要处理的网站：https://mbd.baidu.com/newspag...for(vari=0;i<document.getElementsByClassName('contentImglinexRBS').length;i++){vartupianwidth=document.getElementsByClassName('contentImglinexRBS')[i].offsetWidth;vartupianheight=document.getElementsByClassName('contentImglinexRBS')[i].offsetHeight;tupianheight=tupianheight-20;vartargetImg=newImage();targetImg.crossOrigin='';targetImg.src=document.getElementsByClassName('contentImglinexRBS')[i].getElementsByTagName("img")[0].src;targetImg.onload=(function(){varcanvas=document.createElement('canvas');canvas.width=tupianwidth;canvas.height=tupianheight;varcxt=canvas.getContext('2d');cxt.drawImage(targetImg,0,0);varclipImage=canvas.toDataURL("image/png",1);document.getElementsByClassName('contentImglinexRBS')[i].getElementsByTagName("img")[0].src=clipImage;})(i);}

Answer 1

问题提的很好，
主要问题在于，图片onload使用和匿名函数自执行这块。因为你已经使用了canvas，必然会处理兼容性问题，所以完全可以使用let节省大量代码和充分发挥let的块级作用域优势。
以上代码仅供参考，注意三点：
1.我用的本地图片，如果你是网上图片需要处理跨域。
2.注意性能，比如预先存储letlen=arrImg.length等。
3.尽量使用ES6简化代码。
希望我的回答对你有用，加油！