我有一点问题,我需要根据产品购买后显示的消息创建快照,将其视为卖家的某种确认收据。
我的想法是使用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。
有什么想法吗?提前谢谢!
答案 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%准确,但重点是分享想法
潜入不同的资源后,这是我使这件事工作的唯一方法。 谢谢你的帮助。