如何使用数据 URI 将画布复制为图像或另一个画布答案

【问题标题】：How to use Data URI to copy canvas as image or another canvas如何使用数据 URI 将画布复制为图像或另一个画布
【发布时间】：2013-09-05 11:34:12
【问题描述】：

我将图像转换为画布并对其进行了更改，并希望将画布更改为数据 URI，并将其用于图像对象或其他画布的源

我正在使用以下代码执行此操作，但没有得到任何结果。请建议我可以使用的任何其他方法。

代码：

function onPhotoURISuccess(imageURI) {

        var largeImage = document.getElementById('testImage'); //image object

        var canvas = document.getElementById('canvasPnl');// source canvas
        var context= canvas.getContext("2d");
        var imageObj = new Image();
        imageObj.onload = function(){
            context.drawImage(imageObj,0,0,300,300 );
            context.fillStyle="#FFFFFF";
            context.fillText('Latitude:'+ lat.toString()+'Longitude:'+ lon.toString(),0,10);
            context.fillText(new Date(), 0, 20);
            context.save();
        };
        imageObj.src=imageURI;

        var img_uri= canvas.toDataURL("image/png");
        var image = new Image();
        image.src =img_uri;
        largeImage.src=img_uri;

        var canvas2 = document.getElementById('canvasPnl2');//destination canvas
        var context2= canvas2.getContext("2d");
        context2.drawImage(image,0,0);

}

【问题讨论】：

标签： html canvas html5-canvas data-uri data-url

【解决方案1】：

你已经差不多了。

由于您要生成第二个图像对象（var image），您还必须执行第二个 onload：

  var imageObj = new Image();
  imageObj.onload = function(){

      ...

      var image = new Image();
      image.onload=function(){

          ...

      }
      image.src=canvas.toDataURL(); // .png is the default


  };
  imageObj.crossOrigin="anonymous";
  imageObj.src=imageURI;

另外，你有一个 context.save 没有 context.restore（通常它们是成对的）。

这是代码和小提琴：http://jsfiddle.net/m1erickson/ne4Up/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid red;}
    img{border:1px solid blue;}
</style>

<script>
$(function(){

    var lat="lat";
    var lon="long";

    onPhotoURISuccess("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png");

    function onPhotoURISuccess(imageURI) {

            var largeImage = document.getElementById('testImage'); //image object

            var canvas = document.getElementById('canvasPnl');// source canvas
            var context= canvas.getContext("2d");
            var imageObj = new Image();
            imageObj.onload = function(){
                context.drawImage(imageObj,0,0,100,100 );
                context.fillStyle="#FFFFFF";
                context.fillText('Latitude:'+ lat.toString()+'Longitude:'+ lon.toString(),0,10);
                context.fillText(new Date(), 0, 20);


    //            context.save(); // where's the matching context.restore();


                var image = new Image();
                image.onload=function(){
                    var canvas2 = document.getElementById('canvasPnl2');//destination canvas
                    var context2= canvas2.getContext("2d");
                    context2.drawImage(image,0,0);
                    largeImage.src=canvas2.toDataURL();
                }
                image.src=canvas.toDataURL(); // .png is the default


            };
            imageObj.crossOrigin="anonymous";
            imageObj.src=imageURI;


    }        

}); // end $(function(){});
</script>

</head>

<body>
    <p>Pnl</p>
    <canvas id="canvasPnl" width=100 height=100></canvas>
    <p>Pnl2</p>
    <canvas id="canvasPnl2" width=100 height=100></canvas>
    <p>testImage</p>
    <img id=testImage src="houseicon.png" width=100 height=100 >
</body>
</html>

【讨论】：

【解决方案2】：

如果您只是想将一个画布绘制到另一个画布上，则无需先将其转换为图像。只需将源画布直接用作drawImage 的参数即可：

context2.drawImage(canvas, 0, 0);

如果您绝对想先将其转换为图像，您只需修改几行即可处理图像加载的异步性质：

var img_uri= canvas.toDataURL("image/png");
var image = new Image();
var canvas2;    /// put them here so they are available outside onload below
var context2;

/// put it in a onload here as well
image.onload = function() {
    canvas2 = document.getElementById('canvasPnl2');//destination canvas
    context2= canvas2.getContext("2d");
    context2.drawImage(image,0,0);
}

image.src =img_uri;

小提示：某些版本的 Chrome 存在 new Image 的错误。因此，请考虑改用document.createElement('image')。

【讨论】：