Question

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

我正在尝试从几个图像创建一个画布，一个是Facebook用户个人资料图片（我正在保存以解决跨域问题）但仍然得到一个空白的背景？

继承人的代码

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

从Canvas元素制作图像

1 个答案: