canvas.toDataURLは空のデータを返します。配列とループを使用した文字列

Question

canvas.toDataURLでこの問題が発生しています。四角形の画像を4つの部分で切り抜いて、3つの部分のテクスチャとして使用しようとします。モデルがテクスチャ化されることもあります。私はそれがthreejsのバグだと思ったが、この別個の関数を試してみたところ、base64コードか空の'data:,'が得られた。私はこの機能が3回目の周りでしか機能しない理由を理解できません。 ここでは、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>

あなたのイメージは、URLをロードしようとロードされていません

Answer 1

https://website-design-studio.net/finallinkB/wp-content/themes/suffusion/images/2.jpg

あなたが 画像の原因となるような画像は、ありません見ることができます

.widthとimage.heightは0であるため、メソッドからこのキャンバスにデータがありません。ctxrend1.drawImage。