將頁面的html部分，生成爲一張圖片，點擊下載的時候，下載這張圖片到本地電腦
html2canvas.js——HTML轉Canvas工具
1.下載html2canvas.js：https://html2canvas.hertzen.com/
github參考：https://github.com/niklasvh/html2canvas
1.引入文件：
<script src="jquery-1.9.0.min.js"></script>
<script src="html2canvas.js"></script>
2.html:
<body>
<button>講文本內容生成一張圖片，下載保存</button>
<div style="width: 400px;height: 400px;" id="saveBox">
<p> 我是一段用來生成圖片的文本</p>
<p> 我是一段用來生成圖片的文本</p>
<p> 我是一段用來生成圖片的文本</p>
<p> 我是一段用來生成圖片的文本</p>
<p> 我是一段用來生成圖片的文本</p>
</div>
<img src="" alt="" id="saveImg">
<a href="javascript:;" class="btn-save" title="保存圖片">保存圖片</a>
</body>
3.js邏輯代碼
var createImg = '';
$("button").click(function() {
html2canvas($("#saveBox")[0], {
scale: 1,
logging: false,
useCORS: true
}).then((canvas) => {
createImg = canvas.toDataURL("image/jpeg", 1);
$('#saveImg').attr('src', createImg);
});
// 點擊下載陣容圖片
$('.btn-save').on('click', function() {
handlerDownload(base64ToBlob(createImg), 'my.jpg');
});
})
// 處理下載
function handlerDownload(data, fileName, contentType = 'image/jpeg') {
const blob = new Blob([data], {
type: contentType
})
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 創建下載的鏈接
downloadElement.href = href
downloadElement.download = fileName // 下載後文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 點擊下載
document.body.removeChild(downloadElement) // 下載完成移除元素
window.URL.revokeObjectURL(href)
}
// base64轉blob
function base64ToBlob(code) {
let parts = code.split(';base64,');
let contentType = parts[0].split(':')[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {
type: contentType
});
}