Jquery mobile 动态保存图像错误_Jquery Mobile_Cordova_Kineticjs

Jquery mobile 动态保存图像错误

jquery-mobile cordova

Jquery mobile 动态保存图像错误,jquery-mobile,cordova,kineticjs,Jquery Mobile,Cordova,Kineticjs,我在动力学方面有问题。我有一个带有kinetics的stage，它只有一个图像和文本，但我想将该stage导出到像myImage.jpg这样的图像，而不像[data:image/wIlksoks.e]那样，它是从kinetics返回dataUrl（）的回调我正在尝试使用以下代码： stage.toDataURL({ width: 350, height: 350, mimeType: "image/jpeg", callback: function(dataUr

我在动力学方面有问题。我有一个带有kinetics的stage，它只有一个图像和文本，但我想将该stage导出到像myImage.jpg这样的图像，而不像[data:image/wIlksoks.e]那样，它是从kinetics返回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);

国王问候

您可以使用stage.toDataURL获取服务器的数据URL：

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

                // dataURL is available for saving to your server

            }
        });

注意：确保您的图像和.html托管在同一个域上。

否则你的stage.toImage会因为CORS安全性而失败

因此，请务必检查您的控制台的CORS安全错误

或者：

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

然后，您可以创建一个临时画布来获取数据URL

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

下面是代码和小提琴：


原型
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：300px；
高度：300px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：300，
身高：300
});
var layer=新的动能层（）；
阶段。添加（层）；
var img=新图像（）；
img.onload=函数（）{
start（）；
}
img.crossOrigin=“匿名”；
img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
函数start（）{
var kImage=新的动力学图像({
x:0,，
y:0，
宽度：300，
身高：300，
图片：img
});
图层。添加（kImage）；
var kText=新的dynamic.Text({
x:20，
y:20，
尺寸：24，
填充：“蓝色”，
文字：“你好！”
});
层。添加（kText）；
layer.draw（）；
}
$（“#stageAsImage”）。单击（函数（）{
stage.toImage({
回调：函数（stageImg）{
var tempCanvas=document.createElement（“画布”）；
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”）；
src=dataURL；
}
});
});
}); // end$（函数（）{}）；
将舞台另存为图像

是相同的结果，我看不到任何差异…我真的需要像图像一样保存，因为我需要发送到文件传输以将图像上载到服务器！好的…我明白了…但是你知道为什么我不能将图像发送到文件传输以在我的服务器中上载图像吗？我认为我需要将此图像保存在我的多媒体资料或类似的内容中，因为在我拍摄照片或从多媒体资料中进行文件传输时，文件传输正在工作，因为发送到文件传输的文件类似于“sd/mm/picture”。你是说？哦…对不起，国王，谢谢！！我非常感激！嗨…有一件事…由于某种原因，代码在设备中不起作用…使用这些，不要做任何事情！stage.toImage（{callback:function（stageImg）{var tempCanvas=document.createElement（“画布”）；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；}

<!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>