0

サイトでクーポンジェネレータモジュールを開発しました。html形式でクーポンを作成し、JavaScript関数を使用してそのhtml値をキャンバスに入力します。

function checkcanvas(id) {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='437' height='262'>" 
        +  "<foreignObject width='100%' height='100%'>"
        + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>"
        +  $("#coupon_td").html()
        + "</div>"
        + "</foreignObject>"
        + "</svg>";

    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;

    if(id == 2) {
        document.getElementById('base_64_img').value = canvas.toDataURL();
    }
}

base_64_imgは単なる非表示の要素なので、データをphpコードに投稿し、base64コードを使用して画像を作成できます。

私が直面している最大の問題は、このコードがほとんどすべてのバージョンのMozilla Firefoxで完全に機能したが、GoogleChromeでは機能しなかったことです。

4

1 に答える 1

1

あなたのコードでは、「SVG IMAGE」を生成し、toDataURL（）に変換しようとしています。

var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

これが問題です。このURLから DataURLまで：

要求されたタイプがimage/pngでなく、戻り値がdata：image / pngで始まる場合、要求されたタイプはサポートされていません。

このフィドルコードで、印刷された出力「data：image /png;base64」が表示されている場合。「data：image /svg;base64」であると想定されています。

svg画像を作成する代わりに、canvas要素とjavascriptを使用して、関連するバナー画像を描画します。出力を取得する場合は、ブラウザでコピーして貼り付けてみてください。（動作する場合があります）。

SVG.toDataURLと呼ばれるこのjsプラグインを確認してください

お役に立てれば。

于 2013-01-02T11:44:39.910 に答える