一、引用库
html2canvas.js和canvas2image.js的下载地址:
html2canvas.js: http://html2canvas.hertzen.com/dist/html2canvas.min.js
canvas2image.js: https://github.com/SuperAL/canvas2image/blob/master/canvas2image.js
二、使用
需要已引入jQ库。如果浏览器没有引入,可以自行引入
http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
同步写法
function save_html_as_png(filename = 'image') {
var opts = {
//scale: scale, // 添加的scale 参数
//canvas: canvas, //自定义 canvas
//logging: false, //日志开关,便于查看html2canvas的内部执行流程
//width: width, //dom 原始宽度
//height: height,
useCORS: true // 【重要】开启跨域配置
};
html2canvas($('body')[0], opts).then(canvas => {
//document.body.appendChild(canvas);
// canvas宽度
var canvasWidth = canvas.width;
// canvas高度
var canvasHeight = canvas.height;
console.log(canvasHeight, canvasWidth);
//sleep(2);
// 调用Canvas2Image插件
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
// 调用Canvas2Image插件
Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename);
console.log('ok');
});
}
异步写法
async function async_save_html_as_png(filename="image") {
var opts = {
//scale: scale, // 添加的scale 参数
//canvas: canvas, //自定义 canvas
//logging: false, //日志开关,便于查看html2canvas的内部执行流程
//width: width, //dom 原始宽度
//height: height,
useCORS: true // 【重要】开启跨域配置
};
var canvas = await html2canvas($('body')[0], opts);
// canvas宽度
var canvasWidth = canvas.width;
// canvas高度
var canvasHeight = canvas.height;
console.log(canvasHeight, canvasWidth);
//sleep(2);
// 调用Canvas2Image插件
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
// 调用Canvas2Image插件
Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, 'png', filename);
console.log('ok');
}
直接调用我包装好的程序即可。
要点说明:
1、html2canvas 传入的是 dom对象。这是一个异步函数。可以截图指定元素区域。
2、html2canvas 的 useCORS 默认是False(跨域)。如果不跨域,则截图中无法加载跨域图片。
3、Canvas2Image.convertToImage 是同步函数。可以指定图片区域大小。类型可以是jpeg/png/bmp等(不区分大小写)。文件名不需要后缀。Canvas2Image.convertToImage 只会下载图片文件。无法存放到指定路径。
接了一个活动需求,要求页面打开之后,可以长按触发保存图片,并且图片下方需要带上图和二维码的内容,以方便图片分享到朋友圈后可以长按识别二维码打开页面。
在开发中需要对某个网站进行自动截图,然后保存到服务器的操作,自己写一个截图功能太浪费时间,精准像素推荐大家使用这种免费的网页截图接口网站来完成,简单快捷。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!