思路就是将svg转为canvas,不用借助插件就可以实现,就是将页面的svg元素先转成base64,再用img显示,再将Img转成canvas,最后删除原来的svg元素就可了,赶紧试试吧。
\nhandleSvgToCanvas() {\n //以下是对svg的处理\n //获取页面所有svg元素\n var svgElem = document.getElementsByTagName("svg");\n // 遍历svg元素\n [].forEach.call(svgElem, function(node) {\n var parentElement = node.parentNode;\n const img = new Image();\n // 将svg先转成base64图片形式,再将图片转成canvas\n img.src = `data:image/svg+xml,${encodeURIComponent((new XMLSerializer()).serializeToString(node))}`\n img.crossOrigin = 'anonymous';\n img.onload = function(){\n // 获取当前svg的宽高,onload方法为异步\n const width = node.getBoundingClientRect().width\n const height = node.getBoundingClientRect().height\n const canvas = document.createElement('canvas');\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext("2d");\n ctx.drawImage(img, 0, 0, width,height);\n parentElement.appendChild(canvas)\n // 删除之前的svg和图片,只保留canvas\n parentElement.removeChild(node);\n parentElement.removeChild(img);\n }\n parentElement.append(img);\n });\n },如果需要下载图片,只需要参数如下方法就可以实现,其中href 的url值就是base64地址
// 下载图片\ndownLoad(url) {\n var oA = document.createElement("a");\n oA.download = 'down.jpg';// 设置下载的文件名,默认是'下载'\n oA.href = url;\n document.body.appendChild(oA);\n oA.click();\n oA.remove(); // 下载之后把创建的元素删除\n }\n