从 Canvas 元素制作图像答案

【问题标题】：Make an image from Canvas element从 Canvas 元素制作图像
【发布时间】：2013-08-21 06:59:39
【问题描述】：

我知道以前有人问过这个问题，但我认为我的问题有点不同......

我正在尝试从几张图片创建一个画布，其中一张是 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>

【问题讨论】：

标签： javascript html image canvas

【解决方案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;
       };
    };

【讨论】：