Kinetics saving image error

问题

Im having problems with kinetics. I have a stage with kinetics with a one image and text, but that I want is export the stage to a image like myImage.jpg no like [data:image/wIlksoks.e] that it is the callback that return dataUrl() from kinetics.

Im trying with this code:

stage.toDataURL({
    width: 350,
    height: 350,
    mimeType: "image/jpeg",
    callback: function(dataUrl) {
      /*
       * here you can do anything you like with the data url.
       * In this tutorial we'll just open the url with the browser
       * so that you can see the result as an image
       */
      window.open(dataUrl);
    }
  });
}, false);

King Regards!

回答1:

You can use stage.toDataURL to get your dataURL for the server:

        stage.toDataURL({
            callback:function(dataURL){

                // dataURL is available for saving to your server

            }
        });

Note: Be sure that your image and your .html are hosted on the same domain.

Otherwise your stage.toImage will fail because of CORS security.

So be sure to check your console for CORS security errors !

Alternatively:

You can use stage.toImage to create a dataURL from your image+text.

Then you can create a temp canvas to get the dataURL.

stage.toImage({
    callback:function(stageImg){

        var tempCanvas=document.createElement("canvas");
        var tempCtx=tempCanvas.getContext("2d");
        tempCanvas.width=stageImg.width;
        tempCanvas.height=stageImg.height;
        tempCtx.drawImage(stageImg,0,0);
        var dataURL=tempCanvas.toDataURL();

        // dataURL is available for saving to your server
    }
});

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/RV694/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:300px;
  height:300px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 300
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var img=new Image();
    img.onload=function(){
        start();
    }
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";

    function start(){

        var kImage = new Kinetic.Image({
            x: 0,
            y: 0,
            width: 300,
            height: 300,
            image:img
        });
        layer.add(kImage);

        var kText = new Kinetic.Text({
            x:20,
            y:20,
            fontSize:24,
            fill:"blue",
            text:"Hello!"
        });
        layer.add(kText);

        layer.draw();

    }


    $("#stageAsImage").click(function(){

        stage.toImage({
            callback:function(stageImg){

                var tempCanvas=document.createElement("canvas");
                var tempCtx=tempCanvas.getContext("2d");
                tempCanvas.width=stageImg.width;
                tempCanvas.height=stageImg.height;
                tempCtx.drawImage(stageImg,0,0);
                var dataURL=tempCanvas.toDataURL();
                var imageElement=document.getElementById("newImage");
                imageElement.src=dataURL;

            }
        });

    });


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="stageAsImage">Save stage as image</button>
    <div id="container"></div>
    <img id="newImage">
</body>
</html>

来源：https://stackoverflow.com/questions/18999879/kinetics-saving-image-error

标签

jquery-mobile

cordova

kineticjs