html 网页图片保存

前情提要

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

将html保存到本机：

第一步：将html转化为图片

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

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

1、无需框架，纯html保存

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

.....

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

第三步:利用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';
        });

    }