时间戳

首页 > 解决方案 > 将 SVG D3 js 导出为 PNG 或 JPEG 并通过电子邮件发送

javascript - 将 SVG D3 js 导出为 PNG 或 JPEG 并通过电子邮件发送

问题描述

我有一个将 svg d3 导出为 png 或 jpg 图像的 javascript 代码。导出 svg 时，它会发送一封包含图像的电子邮件（发送我使用 smtpjs 的电子邮件），图像已完美下载，但当我打开它时，它会失去质量并且几乎所有图形都被删除，并且图像到达电子邮件是空的。有没有办法来解决这个问题？

**代码： **

function svgString2Image(svgString, width, height, format, callback) {
        var format = format ? format : 'png';

        var imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));// Convert SVG string to data URL

        var canvas = document.createElement("canvas");
        var context = canvas.getContext("2d");

        canvas.width = width;
        canvas.height = height;

        var image = new Image();
        image.onload = function () {
            context.clearRect(0, 0, width, height);
            context.drawImage(image, 0, 0, width, height);

            canvas.toBlob(function (blob) {
                var filesize = Math.round(blob.length / 1024) + ' KB';
                if (callback) callback(blob, filesize);
            });
        };

        image.src = imgsrc;
        console.log(image.src)

        Email.send({
            SecureToken: "09f68b-d5e5-425-ba8-5d6b9419",
            To: 'em@gmail.com',
            From: "em@gmail.com",
            Subject: "This is the subject",
            Body: "iuwaehfiuwreu",
            Attachments: [
                {
                    name: "smtpjs.png",
                    data: canvas.toDataURL()
                    //data: imgsrc
                    //data: image.src
                }]
        }).then(
            message => alert(message)
        );
    }

标签： javascriptd3.jssvg

解决方案

我可以修复它，修改上下文的一些属性，这会导致图形的某些部分被擦除，对我有用的是将 fillRect 属性设置为空白，然后绘制图像。这对我有用。

context.fillStyle = "white";
context.fillRect(0, 0, w, h);
context.drawImage(image, 0, 0, w, h);

推荐阅读