0

我有动力学问题。我有一个带有一个图像和文本的动力学阶段，但我想要将阶段导出到像 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);

国王问候！

4

1 回答 1

0

您可以使用 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>
于 2013-09-25T16:08:36.657 回答