Question

我有动力学问题。我有一个带有一个图像和文本的动力学的阶段，但我想要的是将舞台导出到像myImage.jpg这样的图像，不像[data：image / wIlksoks.e]它是从中返回dataUrl（）的回调动力学。

我正在尝试使用此代码：

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);

敬意王！

Answer 1

您可以使用stage.toDataURL获取服务器的dataURL：

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

                // dataURL is available for saving to your server

            }
        });

注意：请确保您的图片和.html托管在同一个域中。

否则您的stage.toImage将因CORS安全性而失败。

因此，请务必检查控制台是否存在CORS安全错误！

<强>可替换地：

您可以使用stage.toImage从图像+文本创建dataURL。

然后你可以创建一个临时画布来获取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
    }
});

这是代码和小提琴：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>

动力学保存图像错误

1 个答案: