问题
Using KineticJS I created a stage with a jpg image and an svg image on top. Then I tried to export the stage. It works fine on desktop but not on IOS. I created a JSFiddle to demonstrate this problem http://jsfiddle.net/confile/p6Eey/
Here is the code:
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 1000
});
var layer = new Kinetic.Layer();
stage.add(layer);
var bgImage = new Image();
bgImage.onload = function() {
var bgimg = new Kinetic.Image({
image: bgImage,
width: 1000,
height: 1000
});
layer.add(bgimg);
layer.draw();
var img=new Image();
img.onload = function () {
var image1 = new Kinetic.Image({
image: img,
x: 300,
y: 300
});
layer.add(image1);
layer.draw();
image1.scale({
x: 0.3,
y: 0.3
});
image1.rotate(45);
layer.draw();
stage.toDataURL({
mimeType: "image/jpeg",
quality: 1.0,
callback: function(image) {
alert("toDataURL");
// document.body.appendChild(image);
}
});
stage.toImage({
mimeType: "image/jpeg",
quality: 1.0,
callback: function(url) {
alert("toImage");
}
});
}
img.crossOrigin="anonymous";
img.src = "https://dl.dropboxusercontent.com/u/47067729/sandwich2.svg";
};
bgImage.crossOrigin="anonymous";
bgImage.src =
"https://dl.dropboxusercontent.com/u/47067729/Foto2.jpg";
How can I export a Stage with an SVG Image on IOS?
回答1:
Drawing svg to canvas is bad idea. Look there: https://stackoverflow.com/a/5505861/512042 As workarond you may:
1 Convert image to png.
or
2 Use Kinetic.Path
来源:https://stackoverflow.com/questions/23771740/kineticjs-how-can-i-export-a-stage-with-an-svg-image-on-ios