js将指定的网页元素转换为图片

学习使我快乐——玉祥

已于 2022-11-16 15:27:02 修改

阅读量2.4k

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

于 2022-11-16 15:26:21 首次发布

本文章作者主页，https://blog.csdn.net/qq_43319748，未经作者允许禁止转载，如有问题，欢迎指正！☺☺☺

本文链接：https://blog.csdn.net/qq_43319748/article/details/127886131

版权

SVG 二维码 dom-to-image 下载图片转换

关键词由CSDN通过智能技术生成

js 专栏收录该内容

75 篇文章 3 订阅

订阅专栏

引用插件，下载地址：

dom-to-image/dom-to-image.min.js at master · tsayen/dom-to-image · GitHub

比如我js生成了一个svg二维码，想要下载，但它不是图片，这时候就需要将元素转为图片了

效果：

参考代码：

<html>
  <body>
	<div id="share_tools" style="width:122px;height:122px;padding:2px;"></div>
    <script src="http://localhost:81/0_plus-in/arale-qrcode/arale-qrcode_3.0.5_min.js"></script>
	<script src="http://localhost:81/0_plus-in/dom-to-image/dom-to-image.min.js"></script>
  </body>
  <script type="text/javascript">
  	var codeFigure = new AraleQRCode({
  		"render":  "svg",  // 生成的类型 'svg' or 'table'
  		"text":'https://github.com/soldair/node-qrcode', // 需要生成二维码的链接
  		"size": 120 // 生成二维码大小
  	});
	var share_tools = document.querySelector('#share_tools');
	share_tools.appendChild(codeFigure);
	 setTimeout(()=>{
		var node = document.getElementById("share_tools"); // 选择要截图的dom节点
		domtoimage.toPng(node)
        .then(function (dataUrl) {
            var img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
        })
        .catch(function (error) {
            console.error("oops, something went wrong!", error);
        });

	 },1000);
	  
	  
  </script>
</html>

先记录下