Kinetics saving image error

2019-09-05 08:46发布

站内问答 / 前端开发
1336 1 6

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条回答
叛逆
2楼-- · 2019-09-05 09:26

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)