1

画像をキャンバスに変換して変更を加え、変更を加えてキャンバスをデータ 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);

}
4

2 に答える 2

3

あなたはほとんどそれを手に入れました。

ここに画像の説明を入力

2 番目のイメージ オブジェクト (var image) を生成しているため、2 番目の 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.restore なしでそこに context.save があります (通常、それらはペアになっています)。

ここにコードとフィドルがあります: 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-05T15:09:59.500 に答える