在Javascript

时间:2016-10-28 23:01:29

标签: javascript html css svg

我有一点问题,我需要根据产品购买后显示的消息创建快照,将其视为卖家的某种确认收据。

我的想法是使用html to canvas(https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas)创建这个快照,我设法创建了一个模态窗口,并在购买产品后将DOM元素粘贴到那里。

因为我们无法将html元素直接打印到画布,所以本教程会创建一个SVG图像,表示此html的内容,在本例中为收据。问题是我没有得到样式,只有信息。 让我展开一点:

想象一下,我们有这个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;

使用此代码,快照显示正确的信息,但不存在任何样式。 我尝试按照此文档https://www.w3.org/TR/SVG/styling.html#StylingWithCSS加载样式,但没有成功......

我想也许它不起作用,因为这个数据被解释为一个字符串(我指的是var数据)。我还尝试使用jquery将此SVG代码转换为XML,但没有成功......

我也尝试过 rasterizedHTML 库,但是我遇到了同样的问题,我没有让这些样式工作。 我尝试从URL和本地文件加载样式。从URL加载可能会导致CORS问题。

我更新了代码,我认为这是由于XML无效,尽管在验证器中说它是一个格式良好的XML。

有什么想法吗?提前谢谢!

2 个答案:

答案 0 :(得分:0)

您可以使用bounds对象的HTMLCanvasElement功能,该功能可以获得带有图片内容的toDataURL URI,如下所示:

data::

答案 1 :(得分:0)

我已经解决了这个问题。我使用jquery ajax和ES6的promises从远程服务器中提取了样式文件。 请使用样式元素参阅此页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%准确,但重点是分享想法

潜入不同的资源后,这是我使这件事工作的唯一方法。 谢谢你的帮助。