canvas.toDataURL 返回空数据：，使用数组和循环的字符串

Question

canvas.toDataURL 有这个问题。我尝试将矩形图像裁剪为 4 个部分，并将它们用作threejs 中的纹理。有时模型会被纹理化，有时不会。我认为这是threejs中的一个错误，但尝试了这个单独的函数，结果我得到了一个base64代码或一个空的'data:,'。我不明白为什么这个功能每三次才起作用。 这里是小提琴，但请考虑，jsfiddle 过滤图像。应该有一个base64字符串或'data:,'

<button onclick="updatePics()">
  Test
</button>

<script>
function updatePics(){

    var pics = new Array(20);
    var j = -1;

    for(var i=1; i<=5;i++){

        var imgrenderData = 'https://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/'+i+'.jpg';

        var image = new Image();
        image.src = imgrenderData;

        image.onload = (function(){

            var canvasrend1 = document.createElement("canvas");
            var ctxrend1 = canvasrend1.getContext("2d");

            var canvasrend2 = document.createElement("canvas");
            var ctxrend2 = canvasrend2.getContext("2d");

            var canvasrend3 = document.createElement("canvas");
            var ctxrend3 = canvasrend3.getContext("2d");

            var canvasrend4 = document.createElement("canvas");
            var ctxrend4 = canvasrend4.getContext("2d");

            canvasrend1.width = image.width/2;
            canvasrend1.height = image.height/2;

            ctxrend1.drawImage(image, 0, 0, image.width/2, image.height/2, 0, 0, canvasrend1.width, canvasrend1.height);

            canvasrend2.width = image.width/2;
            canvasrend2.height = image.height/2;

            ctxrend2.drawImage(image, image.width/2, 0, image.width/2, image.height/2, 0, 0, canvasrend2.width, canvasrend2.height);

            canvasrend3.width = image.width/2;
            canvasrend3.height = image.height/2;

            ctxrend3.drawImage(image, image.width/2, image.height/2, image.width/2, image.height/2, 0, 0, canvasrend3.width, canvasrend3.height);

            canvasrend4.width = image.width/2;
            canvasrend4.height = image.height/2;

            ctxrend4.drawImage(image, 0, image.height/2, image.width/2, image.height/2, 0, 0, canvasrend4.width, canvasrend4.height);

            var newimage1 = canvasrend1.toDataURL();
            var newimage2 = canvasrend2.toDataURL();
            var newimage3 = canvasrend3.toDataURL();
            var newimage4 = canvasrend4.toDataURL();

            j++;
            pics[j]=newimage1;
            j++;
            pics[j]=newimage2;
            j++;
            pics[j]=newimage3;
            j++;
            pics[j]=newimage4;

            if(i==5){
                alert(pics[0]);
            }


        })(i);

    }
}

</script>

Answer 1

你的图片没有加载尝试加载urlhttps://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/2.jpg

你可以看到没有图像，这导致 image.width 和 image.height 为 0，因此方法 ctxrend1.drawImage.