网页另存为图片插件:html2canvas
网页另存为图片插件:html2canvas
最近总是搞网页上截图的事, 位置还基本固定, 终于找到救星了 –> htm2canvas
html2canvas 插件
非常强大和好用的一款网页截图插件!!!
官网: html2canvas
使用方法也非常简单, 官网首页就有代码示例 (右下角直接可以截图)
简单的封装一下: 下载图片
+ 拷贝图片
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
// 直接下载到本地
function download_img(element, name) {
html2canvas(element, h2c_option).then(canvas => {
a = document.createElement('a');
document.body.appendChild(a);
a.download = (name || 'download_img') + ".png";
// a.href = canvas.toDataURL();
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.click();
});
}
// 拷贝到剪贴板
function copy_img(element) {
html2canvas(element, h2c_option).then(canvas =>
canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({'image/png': blob})]))
);
}
// 参数选项
function h2c_option() {
return {
scale: 1, // 可以理解为屏幕像素比例(图像大小比例), 例如Mac Retina高清屏, 默认为:2
scrollX: 0,
scrollY: -window.scrollY, // 网页上下滚动偏移量, 防止滚动后图像不全
useCORS: true, // 跨域支持, 例如其他域名的图片
}
};
</script>
还有其他很多参数选项设置, 可以参考 官方文档
参考:
- html to image js
- copy image to clipboard
- html2canvas scrolly
- HTML2canvas generates Blurry images
- html2canvas 官方文档
blog comments powered by Disqus