一、相关技术及参考网站
1、html2canvas
2、canvas标签
说明
使用js将html上任意一个标签及其子标签展示的内容生成图片，并下载到本地。
1、核心是用html2canvas将指定标签元素转换成canvas标签的图表
2、然后用canvas标签自带的转码功能获取图表的base64地址
3、最后创建a标签下载base64内容
二、页面及下载效果
页面效果
下载效果
三、可运行代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<title></title>
</head>
<body>
<div style="width: 148.8px;display: inline-block;">
//要下载成图片的标签
<div id="pic1" style="width: 148.8px;display: inline-block; padding: 10px 0px;">
<img id="cavasimg1" src="test.png" style="display: block;width: 120px;height: 120px; margin-left: auto;margin-right: auto;" />
<strong style="display: block;text-align: center;line-height: 1.15;font-size: 12px;">我媳妇儿</strong>
<strong style="display: block;text-align: center;line-height: 1.15;font-size: 12px;">22岁</strong>
</div>
<input type="button" id="btnsavaImg1" value="下载本地图片" onclick="download()" />
</div>
<div style="width: 148.8px;display: inline-block;">
//要下载成图片的标签
<div id="pic2" style="width: 148.8px;display: inline-block; padding: 10px 0px;">
<img id="cavasimg2" src="http://pic1.zhimg.com/50/v2-a1daed32cac3a2904997f1f7e0b60d9b_hd.jpg" crossorigin="Anonymous" style="display: block;width: 120px;height: 120px; margin-left: auto;margin-right: auto;" />
<strong style="display: block;text-align: center;line-height: 1.15;font-size: 12px;">我媳妇儿</strong>
<strong style="display: block;text-align: center;line-height: 1.15;font-size: 12px;">22岁</strong>
</div>
<input type="button" id="btnsavaImg2" value="下载url图片" onclick="downloadUrlImg()" />
</div>
</body>
<script>
//图片在本地或者src是base64编码的情况下可以直接下载含img标签的父级标签
function download() {
var pic1 = document.getElementById("pic1") //要生成图片的标签
//生成canvas标签
html2canvas(pic1).then(function(canvas) { //找到pic元素时，生成canvas元素。
var dataURL =canvas.toDataURL("image/png") // 获取canvas对应的base64编码
restoreImg(dataURL) //下载canvas图片
});
}
//图片是url时，需要将图片转换成base64进行下载。
function downloadUrlImg(){
debugger
var img = document.getElementById("cavasimg2")
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var imgBase64 = canvas.toDataURL("image/png"); // 可选其他值 image/jpeg
img.setAttribute("src",imgBase64)
var pic2 = document.getElementById("pic2") //要生成图片的标签
//生成canvas标签
html2canvas(pic2).then(function(canvas) { //找到pic元素时，生成canvas元素。
var dataURL =canvas.toDataURL("image/png") // 获取canvas对应的base64编码
restoreImg(dataURL) //下载canvas图片
});
restoreImg(dataURL)
}
function restoreImg(dataURL) {
debugger
let href = dataURL
let a = document.createElement('a') // 创建a标签
a.download = "picName" // 设置图片名字
a.href = href
a.dispatchEvent(new MouseEvent('click')) //模拟点击进行下载
}
</script>
</html>
