Ionic 将 SVG 导出为图像，在 Android 上工作，在 IOS 上剪切图像答案

【问题标题】：Ionic exporting SVG to image, works on Android, image cutted on IOSIonic 将 SVG 导出为图像，在 Android 上工作，在 IOS 上剪切图像
【发布时间】：2020-08-05 11:31:26
【问题描述】：

我有一个 svg，它被导出为 base64 编码图像并发送到服务器，并进一步存储在 Google Cloud Storage 上。此过程在 Android 和浏览器中完美运行，但在运行 IOS 的物理设备上尝试时失败。在 IOS 上发生的是图像被剪切，只有 25% 的图像是可见的，就像它被过度拉伸一样。下面是当前代码

    let mySVG = document.getElementById('svg'),      // Inline SVG element
        can = document.createElement('canvas'), // Not shown on page
        ctx = can.getContext('2d'),
        loader = new Image;                        // Not shown on page
    loader.width = can.width = mySVG.clientWidth;
    loader.height = can.height = mySVG.clientHeight;
    let executed = false;
    loader.onload = () => {
        if (!executed) {
            executed = true;
            ctx.drawImage(loader, 0, 0, loader.width, loader.height);
            let svgAsXML = (new XMLSerializer).serializeToString(mySVG);
            loader.src = 'data:image/svg+xml,' + encodeURIComponent(svgAsXML);
            let svgElement = document.getElementById('svg');
            let svgString = new XMLSerializer().serializeToString(svgElement);
            let decoded = unescape(encodeURIComponent(svgString));
            let base64 = btoa(decoded);
            let imgSource = `data:image/svg+xml;base64,${base64}`;
            let s = new XMLSerializer().serializeToString(document.getElementById('svg'));
            let encodedData = window.btoa(s);
            this.storage.get('appointment').then(appointment => {
                if (appointment && appointment.id) {
                    this.APIService.POST('api/drawing', {
                        appointment: appointment.id,
                        annotations: this.annotations,
                        drawing: can.toDataURL()
                    }, (err, message, data) => {
                        if (err) {
                            return this.toastService.showToast('primary', message);
                        } else {
                            return this.toastService.showToast('primary', 'Drawing uploaded.');
                        }
                    });
                }
            });
        }
    };
    var svgAsXML = (new XMLSerializer).serializeToString(mySVG);
    loader.src = 'data:image/svg+xml,' + encodeURIComponent(svgAsXML);

【问题讨论】：

标签： javascript angular cordova ionic-framework svg

【解决方案1】：

花费大量时间为此编写代码后，使用 npm save-svg-as-png 包中的以下库解决了问题。

【讨论】：