svg转png下载

 从后端获取如上图的svg图片路径：imgUrl；图片信息：iconMsg

主要思路：

1、将svg转换成svg+xml的base64

2、根据svg+xml的base64创建canvas

3、根据创建的canvas转换成png的base64

getPngBase64(imgUrl, iconMsg) {
            const _this = this;
            window.URL = window.URL || window.webkitURL;
            const xhr = new XMLHttpRequest();
            xhr.open('get', imgUrl, true);
            // 至关重要
            xhr.responseType = 'blob';
            xhr.onload = function () {
                if (this.status === 200) {
                    // 得到一个blob对象
                    const blob = this.response;
                    // 至关重要
                    const oFileReader = new FileReader();
                    oFileReader.onloadend = function (e) {
                        // 此处拿到的已经是 base64的图片了
                        const base64 = e.target.result;
                        // 创建图片容器
                        const img = new Image();
                        // imageBase64 为svg+xml的Base64 文件流
                        img.src = base64;
                        img.onload = () => {
                            // 获取图片大小
                            const width = img.width;
                            const height = img.height;
                            // 图片创建后再执行，转Base64过程
                            const canvas = document.createElement('canvas');
                            // 设置好 宽高  不然图片 不完整
                            canvas.width = width;
                            canvas.height = height;
                            const context = canvas.getContext('2d');
                            context.drawImage(img, 0, 0);
                            const ImgBase64 = canvas.toDataURL('image/png');
                            _this.basePng = ImgBase64;
                            _this.downloadPngFile(_this.basePng, iconMsg.name);
                            // ImgBase64 为转换后的 png ImgBase64 文件流
                        };
                    };
                    oFileReader.readAsDataURL(blob);
                }
            };
            xhr.send();
        },

4、下载

downloadPngFile(url, name) {
            const a = document.createElement('a');
            a.setAttribute('href', url);
            a.setAttribute('download', name);
            a.setAttribute('target', '_blank');
            const clickEvent = document.createEvent('MouseEvents');
            clickEvent.initEvent('click', true, true);
            a.dispatchEvent(clickEvent);
        },