Question

我将图像转换为画布并对其进行了更改，并希望将画布转换为数据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);

}

Answer 1

你差不多了。

enter image description here

由于您正在生成第二个图像对象（var图像），因此您还必须进行第二次上载：

  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>

Answer 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')。

如何使用数据URI将画布复制为图像或其他画布

2 个答案: