ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 752 forks source link

IOS7: stage.toDataURL and stage.toImage not working with SVG Images #935

Closed confile closed 10 years ago

confile commented 10 years ago

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

It works on IOS only if you don't use SVG images.

lavrton commented 10 years ago

http://stackoverflow.com/a/23787397/512042

confile commented 10 years ago

@lavrton Convert image to png with canvas is not working because auf security concerns.

lavrton commented 10 years ago

Convert it on server side and use converted png on client or look there https://code.google.com/p/canvg/

confile commented 10 years ago

@lavrton Why should canvg solve the security problem?

lavrton commented 10 years ago

I was not testing. But I guess it should work (library works as parser). https://code.google.com/p/canvg/#Potential_uses

confile commented 10 years ago

I works only with Canvg https://code.google.com/p/canvg/ on Safari and ios.