我想抓取一个 SVG 并将其保存为 PNG(来自创建 SVG 的图表插件),我想我已经找到了实现这个的方法......
我一直在寻找为什么 onload 函数没有触发,但我仍然不明白为什么下面的代码不起作用。没有显示你好。
jQuery(function ($) {
var svg = $("#visualizer-152").find('svg');
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(svg);
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
drawing = new Image();
//All above seems to work, no errors in console and objects
//seems to be created correctly
drawing.onload = function () {
alert('hello');
context.drawImage(drawing,0,0);
var base64 = canvas.toDataURL('image/png', 1);
};
drawing.src = imgsrc;
});
更新
将 onload 更改为并且它似乎工作...
$( drawing ).load( "", function() {
context.drawImage(drawing,0,0);
var base64 = canvas.toDataURL('image/png', 1);
console.log('base64');
console.log(base64);
});
但现在另一个问题,我检索到这个错误:
Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
更新2 如果我尝试单击控制台中生成的数据字符串:
var imgsrc = 'data:image/svg+xml;base64,'+ btoa(svg);
console.log(imgsrc);
我在控制台中得到这个字符串:
data:image/svg+xml;base64,W29iamVjdCBPYmplY3Rd
浏览器出现这个错误:
此页面包含以下错误:
第 1 行第 1 列错误:文档为空下面是第一个错误之前的页面呈现。
更新 3: 我开始意识到实际问题是我无法正确获取源代码。我测试了将源手动设置为指向特定文件,然后它起作用了。通过查看生成的svg内容...(部分内容)
<div id="visualizer-152">
<div style="position: relative;">
<div dir="ltr" style="position: relative; width: 660px; height: 400px;">
<div aria-label="Ett diagram." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="660" height="400" aria-label="Ett diagram." style="overflow: hidden;">
<defs id="defs">
<clipPath id="_ABSTRACT_RENDERER_ID_0">
<rect x="125" y="77" width="411" height="247"></rect></clipPath>
</defs><rect x="0" y="0" width="660" height="400" stroke="none" stroke-
width="0" fill="#ffffff"></rect>
并尝试一个显然有效的示例:(摘自问题:How to draw an inline svg (in DOM) to a canvas?)
http://jsfiddle.net/epistemex/xfh7nctk/23/
在jsfiddle中,源码被outerHTML抓取:
var svgText = document.getElementById("myViewer").outerHTML;
和来自 fiddle 的 html..(开始)
<div id="container" width=500px height=400px>
<svg class="svg-editor"
id="myViewer"
width="1400"
height="1400"
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
style="overflow:scroll;margin:0;">
但它在我的情况下不起作用,因为 html 看起来不一样并且 svg 没有 id。我尝试向 SVG 添加 ID,尝试向 SVG 添加类但没有成功。我还尝试使用 wrap() 创建包装器 - jQuery 中的函数,但也没有成功:
最佳答案
这是您在 fiddle 中开始的变体,它似乎对我有用。这里缺少的是您必须调整 Canvas 大小以匹配您的图像,但您明白了。
var container = document.getElementById('container');
var svgText = document.getElementById("myViewer").outerHTML;
var myCanvas = document.getElementById("canvas");
var ctxt = myCanvas.getContext("2d");
var DOMURL = window.URL || window.webkitURL || window;
var svg = new Blob([svgText], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);
var img = new Image();
img.onload = createPNG;
img.src = url;
function createPNG() {
ctxt.drawImage(img, 0, 0);
var canvasData = myCanvas.toDataURL('image/png');
// For the download button you can use one you have on your HTML
// or create one like this. Notice the download attribute where you can name your file.
// https://developer.mozilla.org/en/docs/Web/HTML/Element/a#Using_the_download_attribute_to_save_a_canvas_as_a_PNG
var saveBtn = document.createElement('a');
saveBtn.href = canvasData;
saveBtn.textContent = 'Download PNG';
saveBtn.download = 'FILENAME.png';
DOMURL.revokeObjectURL(url);
container.appendChild(saveBtn);
}
编辑:
要选择没有 ID 的 svg,您可以使用 querySelector
查询任何特定元素。尝试用这些替换前两行:
var container = document.getElementById('visualizer-152');
var svgText = container.querySelector('svg').outerHTML;
querySelector()
将只返回它找到的第一个 svg
元素。如果您有多个 SVG,您可以使用 querySelectorAll()
,它将返回所有 svg
元素的数组。
关于javascript - 当我尝试在 Canvas 中创建新图像时,为什么不触发图像加载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33125548/