建立從Canvas元素的圖像

Question

我知道這個問題已經被問過，但我的是一個有點不同，我認爲......

我試圖創建多個圖像一個畫布是一個Facebook用戶的個人資料圖片（我正在保存以解決跨域問題），但仍然得到一個空白PNG回來？

繼承人的代碼

<canvas id="canvas" width="500px" height="500px"></canvas> 
    <img id="canvasImg" src=""/> 
    <?php 

    $username = $user_profile['username']; 
    $image = file_get_contents("https://graph.facebook.com/$username/picture?type=large"); // sets $image to the contents of the url 
    file_put_contents("_assets/img/users/$username.gif", $image); // places the contents in the file /path/image.gif 

    ?> 
    <script> 
    function drawCanvas() { 
     var canvas = document.getElementById('canvas'); 
     var context = canvas.getContext('2d'); 

     var imageObj2 = new Image(); 
     imageObj2.src = "_assets/img/users/<?php echo $username; ?>.gif"; 

     imageObj2.onload = function() { 
      context.drawImage(imageObj2, 0, 0); 
      context.font = "20pt Calibri"; 
      context.fillStyle = 'ffffff'; 
      context.fillText("My TEXT 2!", 70, 120); 
     }; 

     var imageObj1 = new Image(); 
     imageObj1.src = "_assets/img/bg_main.jpg"; 
     imageObj1.onload = function() { 
      context.drawImage(imageObj1, 150, 150); 
      context.font = "20pt Calibri"; 
      context.fillStyle = 'ffffff'; 
      context.fillText("My TEXT!", 70, 60); 
     }; 

     var dataURL = canvas.toDataURL("image/jpg", 1.0); 
     document.getElementById('canvasImg').src = dataURL; 

    } 
    </script> 

    <script> 
    $(document).ready(function(){ 
     drawCanvas(); 
    }); 
    </script> 

Answer 1

你打電話canvas.toDataURL（ 「圖像/ JPG」，1.0）;在圖像加載之前，等畫布被填充之前。您必須在做之前檢查圖像加載狀態：

imageObj2.onload = function() { 
     context.drawImage(imageObj2, 0, 0); 
     context.font = "20pt Calibri"; 
     context.fillStyle = 'ffffff'; 
     context.fillText("My TEXT 2!", 70, 120); 


     var imageObj1 = new Image(); 
     imageObj1.src = "_assets/img/bg_main.jpg"; 
     imageObj1.onload = function() { 
      context.drawImage(imageObj1, 150, 150); 
      context.font = "20pt Calibri"; 
      context.fillStyle = 'ffffff'; 
      context.fillText("My TEXT!", 70, 60); 


      var dataURL = canvas.toDataURL("image/jpg", 1.0); 
      document.getElementById('canvasImg').src = dataURL; 
     }; 
    };