html 网页图片保存

前情提要

图片img可以通过添加a标签进行保存图片，但是在很多时候，需要把当前网页进行图片保存，所以整体思路是这样的：

将html保存到本机：

第一步：将html转化为图片

第二步：保存图片到本机()

考虑平台：安卓微信、ios微信、ios浏览器、安卓浏览器、

1、无需框架，纯html保存

第一步：确定保存图片范围，这里以保存 id为pic为例

<div id="pic">
.....
</div>

第二步：引入文件(资源分享：html2canvas.min.js_我是小白855的博客-CSDN博客)

<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript" src="../farfarm/js/jquery-2.0.3.min.js"></script>

第三步:利用html2canvas.min.js 保存图片

savePic = function() {
img = document.getElementById('pic');}
// 调用html2canvas插件html2canvas(img, {useCORS: true // 跨域配置，不加的话如果有非同源的图片会变空白}).then(function(canvas) {imgUrl = canvas.toDataURL("image/png");let image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {let canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;let context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);let a = document.createElement("a"); // 生成一个a元素let event = new MouseEvent("click"); // 创建一个单击事件a.download = $("#name")[0].value + '邀请函'; // 设置图片名称a.href = imgUrl; // 将生成的URL设置为a.href属性if (/(micromessenger)/i.test(navigator.userAgent)) {//是否电脑微信或者微信开发者工具//这里自定义区域，如果是微信环境，下载图片通过长按图片，我们只需要把生成图片展示出来$(".hidden_view").show();//展示遮罩$("#lookPic").attr('src', imgUrl);//将转换图片编码给图片区域src$(".look").show();//显示图片//这部分区域根据具体业务需求 变动} else {
//如果是浏览器环境，通过直接添加a标签事件直接下载a.dispatchEvent(event); // 触发a的单击事件}};image.src = imgUrl;});

2、vue里面引用依赖，保存html至图片

因为生成图片之后，对图片拉伸都会使得生成图片变模糊

我使用了很多种插件，这款是相对比较清晰的，感兴趣的可以都试一试

第一个：html2canvas

引入：

import html2Canvas from "html2canvas";

使用代码：

const saveIt = () => {html2Canvas(document.getElementById("my_picture"), {// 转换为图片useCORS: true, // 解决资源跨域问题}).then((canvas) => {let dataURL = canvas.toDataURL("image/png");var link = document.createElement("a");link.download = data.userName.Uname + "电子版.png";link.href = dataURL;link.click();});};

当然，我们可以在这个基础上进行条件配置以及一些业务需求（我这里加了定时器，循环样式添加）

const changeToPic = () => {console.log('转成图片')html2Canvas(document.getElementById("certificate"), {// 转换为图片useCORS: true, // 解决资源跨域问题}).then((canvas) => {let dataURL = canvas.toDataURL("image/png");setTimeout(() => {let a = document.getElementById("certificate");let img = document.createElement("img");// console.log(dataUrl);img.src = dataURL;img.style.width = "100vw";img.style.maxWidth = "1200px";img.style.height = "75vw";img.style.maxHeight = "734px";img.style.display = "block";img.id = "my_picture";// dataURLtoBlob(img,data.userName.Uname + '电子版.svg');a.appendChild(img);let ctitle = document.getElementsByClassName("cc");for (let i = 0; i < ctitle.length; i++) {ctitle[i].classList.add("c-class");}}, 100);});};

第二个：domtoimage

引用：

import domtoimage from 'dom-to-image';

使用：

const loadIt = () => {const a = document.getElementById('my_picture');domtoimage.toPng(a, { quality: 0.95, bgcolor: '#fff' }).then(function (dataUrl) {setTimeout(() => {var img = document.createElement('img');img.src = dataUrl;img.style.width = '100%';img.style.height = '100%';// a.appendChild(img);}, 10)var link = document.createElement('a');link.download = data.userName.Uname + '电子版.png';link.href = dataUrl;link.click();        });}

此依赖使用 toPng,toJpg,toSvg

当然转换成Svg图像不会因为拉伸而变模糊，但是SVG图片在很多场景并不能被解析，在某些平台也存在不兼容的问题

为了防止图片因为生成过小，放大模糊，不如之前就是一个大的图片，缩小也不会模糊，这是我的一些简单配置项，最好在1200px屏幕以上打开网页，生成图片模糊程度降低

const loadIt = () => {const a = document.getElementById('my_picture');// 将证书放大到1200分辨率下if (document.body.clientWidth < 1200) {// const numb = 1200 / document.body.clientWidth;// a.style.transform = 'scale(' + numb + ')';a.style.width = '1200px';a.style.height = 'fit-content';}domtoimage.toPng(a, { quality: 0.95, bgcolor: '#fff' }).then(function (dataUrl) {setTimeout(() => {var img = document.createElement('img');img.src = dataUrl;img.style.width = '1200px';img.style.height = '100%';// img.style.backgroundSize = "100% 100%";// a.appendChild(img);}, 10)var link = document.createElement('a');link.download = data.userName.Uname + '电子版.png';link.href = dataUrl;link.click();// a.style.transform = 'scale(1)';a.style.width = '100vw';a.style.height = 'auto';});}