解决html2canvas svg元素不显示的问题

ppylox
·4/7/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

针对html2canvas无法渲染SVG元素的问题,提出将SVG先序列化为base64图片,再通过Image加载并绘制到canvas上的方案。核心步骤:遍历页面所有SVG元素,用XMLSerializer序列化后编码为data URI赋给img,在onload回调中按SVG实际宽高创建canvas并drawImage绘制,随后用canvas替换原SVG并移除临时img。另附下载方法,通过创建带download属性的a标签并触发click实现图片下载。

思路就是将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


相关文章

评论 (0)

暂无评论,来写第一条吧