通过Javascript以特定大小下载SVG作为PNG
我正在尝试设置一个生成器,让人们为他们的手机定制壁纸。目前,我让他们通过修改颜色和文本来编辑svg模板,通过一个工作正常的表单进行定制 然后,一旦他们单击submit,系统会提示他们下载png格式的壁纸。单击按钮后,我将svg绘制到一个隐藏的画布上,然后开始从那里下载png 我正在使用多个Adobe字体的链接来设置壁纸的样式。问题是,每次我试图从手机或更小的窗口下载PNG时,如果我使用的是adobe字体,字体就会被替换 隐藏画布的宽度为1125px,高度为2536px,我有定制的svg来匹配大小。我对画布几乎没有经验,所以我不确定该怎么做,但我最好的猜测是问题在于画布的大小 这是我下载的代码。如果你需要更多的信息,请让我知道,但我的目标是让这个工作,使png将在任何大小的窗口下载高质量通过Javascript以特定大小下载SVG作为PNG,javascript,svg,canvas,png,Javascript,Svg,Canvas,Png,我正在尝试设置一个生成器,让人们为他们的手机定制壁纸。目前,我让他们通过修改颜色和文本来编辑svg模板,通过一个工作正常的表单进行定制 然后,一旦他们单击submit,系统会提示他们下载png格式的壁纸。单击按钮后,我将svg绘制到一个隐藏的画布上,然后开始从那里下载png 我正在使用多个Adobe字体的链接来设置壁纸的样式。问题是,每次我试图从手机或更小的窗口下载PNG时,如果我使用的是adobe字体,字体就会被替换 隐藏画布的宽度为1125px,高度为2536px,我有定制的svg来匹配大小
var btn = document.getElementById('myBtn');
var svg = document.getElementById('bg2');
var canvas = document.querySelector('canvas');
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
if(document.getElementById("name").value=="null" || document.getElementById("name").value=="") {
var un = "MakeAGraphic";
} else {
var enteredName = document.getElementById("name").value.replace(/[^a-zA-Z ]/g, "");
var un = `${enteredName}_MakeAGraphic`
}
var a = document.createElement('a');
a.setAttribute('download', `${un}.png`);
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
btn.addEventListener('click', function () {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
});
字体代码在哪里?它在页面的标题代码中。我用一张泽西风格的墙纸在Codepen中重新创建了这个问题。我认为这可能是一种更有效的方法。因此,当您创建blob时,该blob中没有字体信息,因为数据对象中没有字体信息。您需要确保将包含字体数据的数据URL序列化到blob.Ok中。我通过@import将字体添加到svg中,也遇到了同样的问题。它在钢笔里更新了。你不是这个意思吗?很抱歉,这对我来说都是新鲜事。SVG必须是自包含的,@import看起来像什么?它是否使用数据URL?