2

おそらくこれは何度も取り上げられている。しかし、私はそれに対する最終的な答えを得る必要があります。

object html タグを使用して SVG ファイルをブラウザにロードしました。JavaScript と DOM を使用して、ユーザーはそのファイルを変更し、色要素などをカスタマイズします。基本的にはジャケットのカスタマイザーです。これにはキャンバスを使用していません。これは、イラストレーターからエクスポートされ、変更された純粋な svg です。

このカスタマイズされた画像を含む PDF ドキュメントを作成するために、この svg の変更されたバージョンをサーバーにエクスポートする必要がある時点まで、すべてが順調に進んでいます。明らかに、この画像のbase64文字列を含むサーバーにajaxリクエストを送信する必要があります。

私が尋ねる人は誰でも、JavaScript で画像を作成し、src 属性を SVG のシリアル化された XML に割り当て、それをキャンバスに描画して base64 文字列を抽出する必要があると言うでしょう。

toDataURL()メソッド (またはメソッド)にヒットするまではすべて問題ありませgetImageData()ん。Firefox でのみ動作します。他のブラウザーは、セキュリティ違反の例外をスローしています。それは明らかに受け入れられません。

キャンバスにイメージを描画するとイメージが汚染されるため、これを行う希望を失いました。Web ページの構造全体を変更せずにこの問題を回避する方法はありますか?

4

3 に答える 3

0

fabric js を使用して .toDataURL() の問題を解決しました。

var a = document.getElementById("theSVG"); //This is the <object>
a.setAttribute('data', 'worldmap.svg'); //Setting the data attribute to the svg file


a.onload = function () {

    var svgDoc = a.contentDocument;
    var s = new XMLSerializer();
    var xml = s.serializeToString(svgDoc);
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    var canvas = new fabric.Canvas('canvas');

    var svg = xml;

    fabric.loadSVGFromString(svg, function (objects, options) {
        var loadedObject = fabric.util.groupSVGElements(objects, options);
        canvas.add(loadedObject);
        canvas.calcOffset();
        canvas.renderAll();
        if (!fabric.Canvas.supports('toDataURL')) {
            alert('This browser doesn\'t provide means to serialize canvas to an image');
        }
        else {
            window.open(canvas.toDataURL('png'));
        }

    });
}

これで .toDataURL() の問題は解決しましたが、新しい問題が発生したので、幸運を祈っています。

于 2013-10-24T13:19:30.620 に答える
0

SVG はテキストです。これはおそらく「構造の変更」ですが、SVG ツリーの差分を base64 リマロール全体なしでサーバーに送信できます。

それ以外の場合、SVG オブジェクトがスクリプトと同じドメインに由来する場合、セキュリティ エラーは発生しません。オブジェクトを Web ページと同じサーバーにミラーリングしていただけますか?

于 2013-10-16T13:16:17.587 に答える
0

私は印刷業界で働いています。SVG をベクター形式で保持できれば、従業員は満足します。SVG を PDF に変換できるライブラリは次のとおりです: http://d3export.cancan.cshl.edu/。

于 2013-10-16T13:16:51.247 に答える