將 SVG D3 js 導出為 PNG 或 JPEG 並通過 email 發送

Question

我有一個 javascript 代碼將 svg d3 導出為 png 或 jpg 圖像。 當 svg 被導出時，它會發送一個 email（發送 email）與圖像，圖像下載幾乎完美，但當我打開它並刪除圖形時，圖像質量會丟失， email 空了。 有沒有辦法來解決這個問題？

**代碼： **

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)
        );
    }

Answer 1

我可以修復它，修改上下文的一些屬性，這會導致圖形的某些部分被擦除，對我有用的是將 fillRect 屬性設置為空白，然后繪制圖像。 這對我有用。

** 代碼： **

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