下载SVG至PNG大小的图像

时间:2021-12-07 作者:bastiag5

我想从我的网站下载一个svg作为png。搜索时我找到了这段代码,我必须说一切都正常。该网站是一个只能从手机查看的项目https://7c81b.wineqrcode.com/ 我希望您更改下载图像的大小。目前,照片是根据svg的大小生成的。有什么办法可以绕过这个问题吗?谢谢

function downloadSVGAsPNG(e){
const canvas = document.createElement("canvas");
const svg = document.querySelector(\'#Layer_1\');
const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
const w = parseInt(svg.getAttribute(\'width\'));
const h = parseInt(svg.getAttribute(\'height\'));
const img_to_download = document.createElement(\'img\');
img_to_download.src = \'data:image/svg+xml;base64,\' + base64doc;
console.log(w, h);
img_to_download.onload = function () {
    console.log(\'img loaded\');
    canvas.setAttribute(\'width\', w);
    canvas.setAttribute(\'height\', h);
    const context = canvas.getContext("2d");
    //context.clearRect(0, 0, w, h);
    context.drawImage(img_to_download,0,0,w,h);
    const dataURL = canvas.toDataURL(\'image/png\');
    if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(canvas.msToBlob(), "download.png");
    e.preventDefault();
    } else {
    const a = document.createElement(\'a\');
    const my_evt = new MouseEvent(\'click\');
    a.download = \'download.png\';
    a.href = dataURL;
    a.dispatchEvent(my_evt);
    }
    //canvas.parentNode.removeChild(canvas);
}  
}
const downloadPNG = document.querySelector(\'#downloadPNG\');
if(downloadPNG) { downloadPNG.addEventListener(\'click\', downloadSVGAsPNG);}

2 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

const w = parseInt(svg.getAttribute(\'width\'));
const h = parseInt(svg.getAttribute(\'height\'));
更改这两行,以便wh 具有所需的值。

例如。

const w = 101;
将使结果宽101像素

SO网友:Lovor

在后端准备映像。PHP有相应的库。GD,或者更好的,如果您已经安装/可以安装,请使用imagick。所以它应该是这样工作的:在前端触发图像下载(javascript)。启动对后端的AJAX(fetch)调用。在后端使用PHP转换和调整图像大小。以二进制形式返回javascript。

这是更多的工作,但它是更多的固溶体。除此之外,您可以查看javascript库来调整图像的大小,但这会比较慢,并且依赖于客户端功能,这可能还不够。

相关推荐

SVG upload does not work

我创建了一个带有可单击区域的SVG,用作登录页图像,文件大小为4 MB。我无法上传,Wordpess说有错误(没有详细说明)。大小似乎不是问题,其他大小的文件已上载。我已经安装了SVG支持插件。我用lnkscape创建了它。它的边缘看起来很好,做了它应该做的事情。我尝试了lnkscape中可用的所有SVG格式,但都失败了。我不使用Media Library Assistant。我从哪里开始寻找问题所在?我使用的主题可能是问题(四)吗?如果这真的很琐碎,请容忍我——我对这一点很陌生。