/** * * @param {string} fileName 下载的文件名 * @param {string} fileType 需要转的文件类型 png/jpg * @param {string} svgstr 输入svg */ function parseSvg(fileName, fileType, svgstr) { // 1、创建img var img = document.createElement('img') // 2、svg转base64 img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgstr)))) // 3、转指定格式 img.onload = function() { // 1、创建canvas var canvas = document.createElement('canvas') var context = canvas.getContext('2d') canvas.width = img.width canvas.height = img.height // 2、根据base64生成canvas context.drawImage(img, 0, 0) // 3、canvas转字符串 var canvasData = canvas.toDataUrl("image/" + fileType) // 此时的 canvasData 已经可以作为 img 的 src 进行png图片渲染 ,可以直接 return canvasData 得到: ‘data:image/png;base64,......’ // 4、如果需要下载 /* var imgDownload = document.createElement('img') imgDownload.setAttribute('src', canvasData) imgDownload.onload = function() { var a = document.createElement('a') a.download = fileName + '.' + fileType a.href = imgDownload.getAttribute('src') a.click() } */ } }
标签:canvas,img,svg,base64,jpg,var,png From: https://www.cnblogs.com/shiyiersan/p/17728086.html