如何使用數據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到畫布複製爲圖像或另一畫布

回答

相關問題