前情提要
图片img可以通过添加a标签进行保存图片，但是在很多时候，需要 把当前网页进行图片保存，所以整体思路是这样的：
将html保存到本机：
第一步：将html转化为图片
第二步：保存图片到本机()
考虑平台：安卓微信、ios微信、ios浏览器、安卓浏览器、
1、无需框架，纯html保存
第一步：确定保存图片范围，这里以保存 id为pic为例
<div id="pic">
.....
</div>第二步：引入文件(资源分享：html2canvas.min.js_我是小白855的博客
<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';
});
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
