javascript - 从 Canvas 元素制作图像

Question

我知道这个问题之前已经被问过，但我认为我的问题有点不同......

我正在尝试从多个图像创建一个 Canvas ，其中一个是 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);在加载图像之前，以及在填充 Canvas 之前。在执行此操作之前，您必须检查图像加载状态:

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;
       };
    };