如何使用数据URI到画布复制为图像或另一画布

我转换图像以帆布和更改了它，并希望在画布转换以改变到数据URI和使用，对于图像对象或另一个的源极帆布如何使用数据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); 

}

来源

2013-09-05 Hemantsom

你几乎得到了它。

enter image description here

既然你产生第二图像对象（VAR图像），还必须做第二次的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>

来源

2013-09-05 15:09:59 markE

上面的代码工作完美 – Hemantsom

如果你只是想画在画布上的另一个画布没有必要先将其转换为图像。只需直接使用源画布作为参数传递给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')。

来源

2013-09-05 19:04:27 K3N

如何使用数据URI到画布复制为图像或另一画布

回答

相关问题