将html转为图片

技术2022-07-12 91

① jquery库（看个人需要）： ②dom-to-image.js: https://github.com/tsayen/dom-to-image ③FileSaver.js：https://github.com/eligrey/FileSaver.js

方法一

<html> <head> <script type="text/javascript" src="C:/Users/liushuofu/Desktop/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="C:/Users/liushuofu/Desktop/dom-to-image.js"></script> <script type="text/javascript" src="C:/Users/liushuofu/Desktop/FileSaver.js"></script> <script type="text/javascript"> $(function(){ // $("#btn").click(function(){ //插入图片到html // var node = document.getElementById('table'); // domtoimage.toPng(node) // .then(function (dataUrl) { // console.log(dataUrl) // var img = new Image(); // img.src = dataUrl; // document.body.appendChild(img); // }); // 下载png图片 domtoimage.toBlob(document.getElementById('table')) .then(function (blob) { console.log(blob) window.saveAs(blob, 'my-node.png'); }); // 下载jpeg图片 // domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 }) // .then(function (dataUrl) { // var link = document.createElement('a'); // link.download = 'my-image-name.jpeg'; // link.href = dataUrl; // link.click(); // }); // var node = document.getElementById('table'); // domtoimage.toPixelData(node) // .then(function (pixels) { // for (var y = 0; y < node.scrollHeight; ++y) { // for (var x = 0; x < node.scrollWidth; ++x) { // pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x); // /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */ // pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4); // } // } // }); }) }) </script> </head> <body> <input type="button" id="btn" value="do it" /> <h4>两行三列：</h4> <table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black;"> <tr style="background:green;"> <td rowspan="3">200</td> <td>200</td> <td>300</td> </tr> <tr style="background:green;"> <td rowspan="2">500</td> <td>600</td> </tr> <tr style="background:green;"> <td>600</td> </tr> <tr style="background:skyblue;"> <td rowspan="3">100</td> <td>200</td> <td>300</td> </tr> <tr style="background:skyblue;"> <td>500</td> <td>600</td> </tr> <tr style="background:skyblue;"> <td>600</td> <td>600</td> </tr> </table> </body> </html>

方法二、使用canvas生成

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>htmltopic</title> <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/html2canvas.min.js"></script> <style> * { margin: 0; } .test { width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: #87CEEB; display: inline-block; vertical-align: top; } canvas { margin-right: 5px; } .down { float: left; margin: 40px 10px; } .down2 { float: left; margin: 40px 30px; } </style> </head> <body> <div class="test">测试</div> <div><a class="down" href="" download="downImg">下载</a> </div> <div><a class="down2" href="" download="downImg">下载2</a></div> <script> //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊 //html2canvas(document.querySelector('div')).then(function(canvas) { // document.body.appendChild(canvas); //}); //创建一个新的canvas var canvas2 = document.createElement("canvas"); let _canvas = document.querySelector('div'); var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了 canvas2.width = w * 2; canvas2.height = h * 2; canvas2.style.width = w + "px"; canvas2.style.height = h + "px"; //可以按照自己的需求，对context的参数修改,translate指的是偏移量 // var context = canvas.getContext("2d"); // context.translate(0,0); var context = canvas2.getContext("2d"); context.scale(2, 2); html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) { //document.body.appendChild(canvas); //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载 document.querySelector(".down").setAttribute('href', canvas.toDataURL()); }); </script> <script language="javascript"> //这是另一种写法 $(function () { $(".down2").click(function () { html2canvas($(".test")).then(function (canvas) { var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url window.location.href = imgUri; // 下载图片 }); //html2canvas($('.tongxingzheng_bg'), { // onrendered: function (canvas) { // var data = canvas.toDataURL("image/png");//生成的格式 // //data就是生成的base64码啦 // alert(data); // } //}); }); }); </script> </body> </html>

Processed: 0.009, SQL: 9