gpt4 book ai didi

jquery - 具有图案和图像元素的 SVG 转换为 PNG 图像失败

转载 作者:行者123 更新时间:2023-12-03 22:33:30 38 4
gpt4 key购买 nike

我试图将 Raphael.js 生成的 svg 转换为 PNG 图像。好吧,当 svg 没有图案和图像组件时,我将 svg 转换为图像。然后,当我将这两个组件添加到 SVG 中时,会出现问题并且转换失败。完整的 fiddle 是 here 。即使我保存生成的 svg 并在浏览器中打开而不转换为图像,图像和图案也不会呈现。

代码片段是:

var r = Raphael(document.getElementById("cus"), 390, 253);
r.setViewBox(-5, -2, 228, 306);
for (var outline in doorMatOutline) {
var path = r.path(doorMatOutline[outline].path);
//path.attr({fill: 'url('+patternuri+')'}); //adding pattern
}
//adding image
var img = r.image(imageuri, 5 ,10 ,100 ,100);

var svg = $('#cus').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");

canvg('cvs', svg, {
ignoreMouse: true,
ignoreAnimation: true
});

var canvas = document.getElementById('cvs');
var img = canvas.toDataURL("image/png");

$("#resImg").attr('src', img);
$("#cus").hide();

最佳答案

我已经在这里解决了这个问题http://jsfiddle.net/fktGL/1/ ,首先我必须更改 svg 属性

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

因为 svg 未在 W3C 验证服务上进行验证,并且 here是一个 stackoverflow,解释需要进行更改。

然后我必须添加一些超时以允许 SVG 正确渲染。我理解这是因为图像已在 SVG 和 Canvas 中绘制,但两者都需要一些时间来渲染图像。我的解决方案在较慢的设备上不能完美工作(增加超时会有所帮助),但我不知道另一种方法来解决这个问题(欢迎任何评论/改进)。

这是最后的片段

var r = Raphael(document.getElementById("cus"), 390, 253);
r.setViewBox(-5, -2, 228, 306);
for (var outline in doorMatOutline) {
var path = r.path(doorMatOutline[outline].path);
path.attr({
fill: 'url(' + patternuri + ')'
});
}

$('#cus svg').removeAttr('xmlns');

// If not IE
if(/*@cc_on!@*/false){
$('#cus svg').attr('xmlns:xlink',"http://www.w3.org/1999/xlink");
}


// First timeout needed to render svg (I think)
setTimeout(function(){
var svg = $('#cus').html();
window.svg = svg;
canvg(document.getElementById('cvs'), svg);
// annother delay required after canvg
setTimeout(function(){
var canvas = document.getElementById('cvs'),
img = canvas.toDataURL("image/png");
$("#resImg").attr('src', img);
//$("#cus").hide();
console.log("ending... ");
},100)
},100);

关于jquery - 具有图案和图像元素的 SVG 转换为 PNG 图像失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16580425/

38 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com