html2canvas

项目今天需要将网页上的一部分进行长按保存为图片
最终实现：
需要文件 ：http://html2canvas.hertzen.com/dist/html2canvas.min.js
官网网址：http://html2canvas.hertzen.com/

官网demo：非常简单：

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

获取#capture元素
回调函数中canvas参数
添加在页面上

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

当然结果是生成canvas的，是不可以保存的
所以你需要转为图片格式的话，需要使用canvas的api方法toDataURL()
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

可以设置图片质量：

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

这样就大功告成！！！^_^

转载于:https://www.cnblogs.com/cyany/p/9134129.html