一、相關技術及參考網站
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>