Javascriptで商品を購入した後にスナップショットを作成する

Question

少し問題があります。商品を購入した後に表示されるメッセージからスナップショットを作成する必要があります。

私の考えは、html to canvas（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas）を使用してこのスナップショットを作成することです。私は、モーダルウィンドウを作成し、製品を購入した後にそこにDOM要素を貼り付けることができました。

html要素をキャンバスに直接印刷することはできないため、このチュートリアルでは、このhtmlの内容（この場合は領収書）を表すSVGイメージを作成します。問題は、私はスタイルだけでなく、情報を得ていないということです。 少し広げてみましょう：

私たちはこのSVGを持っていると想像してキャンバスに印刷する必要があります。このコードで

Snapshot.js

var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 

const message = '<div class="part-modal-dialog">' + 
        '<div class="content-dialog">' + 
         '<p class="trade"> Sell buy rent 1220 @2210</p>' + 
        '</div>' + 
       '</div>'; 

var data = '<?xml version="1.0" standalone="no"?>' + 
     '<?xml-stylesheet href="style.css" type="text/css"?>' + 
     '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
     '<foreignObject width="100%" height="100%">' + 
      '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + 
       message + 
      '</div>' + 
     '</foreignObject>' + 
     '</svg>'; 

var DOMURL = window.URL || window.webkitURL || window; 

var img = new Image(); 
var svg = new Blob([data], {type: 'image/svg+xml'}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
} 
img.src = url; 

、スナップショットは、しかしいかなるスタイルが存在しない正しい情報を表示します。 この文書に続くスタイルをロードしようとしましたが、成功しませんでした。

このデータは文字列（私はvarデータを参照しています）として解釈されている可能性があります。私も、私もrasterizedHTMLライブラリを試してみましたが、私は同じ問題を抱えている... jqueryのが、ノー成功を使用してXMLには、このSVGコードを変換する

を試してみました、私は働き方が届きません。 URLとローカルファイルからスタイルをロードしようとしました。 URLからロードすると、CORSの問題が発生する可能性があります。

私はコードが更新されましたバリデーターには整形式のXMLが書かれていますが、これは無効なXMLによるものだと思います。

アイデア？前もって感謝します！

Answer 1

あなたは次のように、画像の内容とUにdata:: URIを取得しますHTMLCanvasElementオブジェクトのtoDataURL機能を使用することができます。

window.open('', document.getElementById('canvas').toDataURL()); 

Answer 2

私は問題を解決してきました。 jquery ajaxを使ってリモートサーバーからスタイルファイルを取得し、ES6からの約束を得ました。 https://www.w3.org/TR/SVG/styling.html#StylingWithCSSのスタイルエレメントを使用してください。コードを確認し

import $ from 'jquery'; 

var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 
$.ajax('someurl.com/file.css').then(
    function success(contents) { 
     const myStylesheet = contents; 
     const message = '<div class="part-modal-dialog">' + 
         '<div class="content-dialog">' + 
          '<p class="trade"> Sell buy rent 1220     @2210</p>' + 
         '</div>' + 
        '</div>'; 

    var data = '<?xml version="1.0" standalone="no"?>' + 
      '<?xml-stylesheet href="style.css" type="text/css"?>' + 
      '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + 
    '<defs>' + 
     '<style type="text/css"><![CDATA[' + 
      myStylesheet + 
     ']]></style>' + 
     '</defs>' + 

     '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' + 
        message.innerHTML + 
       '</div>' + 
    '</svg>'; 

    var DOMURL = window.URL || window.webkitURL || window; 

    var img = new Image(); 
    var svg = new Blob([data], {type: 'image/svg+xml'}); 
    var url = DOMURL.createObjectURL(svg); 

    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     DOMURL.revokeObjectURL(url); 
    } 
    img.src = url; 
} 
function rejected(reason) { 
     console.log(reason); 
}); 

が、これは私が作る唯一の方法である、それは100％正確ではないのですが、ポイントが異なるリソースに飛び込むの後の考えに

を共有することで、構文には注意してくださいこのことはうまくいく。 ご協力いただきありがとうございます。