KineticJS：如何在IOS上导出带有SVG图像的舞台？ [英] KineticJS: How can I export a Stage with an SVG Image on IOS?

问题描述

使用KineticJS我在顶部创建了一个带有jpg图像和svg图像的舞台。然后我试着导出舞台。它在桌面上运行良好，但在IOS上运行不正常。
我创建了一个JSFiddle来演示这个问题 http://jsfiddle.net/confile/p6Eey/

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/

以下是代码：

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

如何在IOS上导出带有SVG图像的舞台？

推荐答案

将svg绘制到画布是个坏主意。看那里： https://stackoverflow.com/a/5505861/512042
作为工作方式，您可以：

Drawing svg to canvas is bad idea. Look there: https://stackoverflow.com/a/5505861/512042 As workarond you may:

1将图像转换为png。

1 Convert image to png.

或

2使用 Kinetic.Path

这篇关于KineticJS：如何在IOS上导出带有SVG图像的舞台？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！