动力学保存图像错误 [英] Kinetics saving image error
问题描述
尝试使用此代码：
stage.toDataURL
width：350，
height：350，
mimeType：image / jpeg，
callback：function（dataUrl）{
/ *
*这里你可以做任何你喜欢的数据url。
*在本教程中，我们将打开浏览器的URL
*，以便你可以看到结果作为一个图像
* /
window.open（dataUrl）;
}
}）;
}，false）;
King Regards！
您可以使用stage.toDataURL为服务器获取数据URL：
stage.toDataURL
callback：function（dataURL）{
// dataURL可用于保存到您的服务器
}
}）;
注意：请确保您的图片和.html位于同一个网域。
否则您的stage.toImage会因CORS安全而失败。 因此，请务必检查您的控制台是否存在CORS安全错误！ 或 您可以使用stage.toImage从您的图片+文字创建数据URL。 然后，您可以创建一个临时画布来获取dataURL。 这里是代码和小提琴： http://jsfiddle.net/m1erickson/RV694/ 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: King Regards! You can use stage.toDataURL to get your dataURL for the 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. Here is code and a Fiddle: http://jsfiddle.net/m1erickson/RV694/
这篇关于动力学保存图像错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
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可用于保存到您的服务器
}
}）;
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Prototype< / title>
< script type =text / javascriptsrc =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（）{
begin（）;
}
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 ）;
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>将阶段另存为图像< / button>
< div id =container>< / div>
< img id =newImage>
< / body>
< / html>
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({
callback:function(dataURL){
// dataURL is available for saving to your server
}
});
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
}
});
<!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>
