從畫布元素制作圖像

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（“ image / 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;
       };
    };