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

引用插件,下载地址:

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>

先记录下


版权声明:本文为qq_43319748原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。