1.cmd打开uniapp项目导入html2canvas
1 | npm install -- save html2canvas
npm install --save html2canvas
2.页面引入
import html2canvas from 'html2canvas';
3.具体代码
let dom = document.querySelector('#page'); // 获取要截取部分的dom元素
html2canvas(dom, {
width: dom.clientWidth, //dom 原始宽度
height: dom.clientHeight,
scrollY: 0, //html2canvas默认绘制视图内的页面,需要把scrollY,scrollX设置为0
scrollX: 0,
useCORS: true //支持跨域
}).then(canvas => {
// 将生产的canvas转为base64图片 到这一步截图已经完成
// 如是原生app webview 嵌套的 h5 页面
let base64 = canvas.toDataURL('image/png').substring(22); // 手机保存需截取
// console.log(base64)
let platform = uni.getSystemInfoSync().platform; //获取平台判断是安卓还是iOS
if (getApp().globalData.mobileType == 'android') { //安卓
window.html2mobile.getImgBase64(base64);
//getImgBase64(base64); 原生安卓定义的方法 调用并且传递 base64
} else { //iOS
window.webkit.messageHandlers.getImgBase64.postMessage(base64)
//getImgBase64(base64); 原生iOS定义的方法 调用并且传递 base64
}
// 如是PC或纯h5 页面
// 将生产的canvas转为base64图片
// let base64 = canvas.toDataURL('image/png');
// 将base64转换为图片保存
// if (window.navigator.msSaveOrOpenBlob) {
// let bstr = atob(base64.split(',')[1]);
// let n = bstr.length;
// let u8arr = new Uint8Array(n);
// while (n--) {
// u8arr[n] = bstr.charCodeAt(n);
// }
// let blob = new Blob([u8arr]);
// window.navigator.msSaveOrOpenBlob(blob, 'pigeons-download' + '.' + 'png');
// } else {
// // 这里就按照chrome等新版浏览器来处理
// const a = document.createElement('a');
// a.href = base64;
// a.setAttribute('download', 'pigeons-download');
// a.click();
// }
4. 如页面截取部分有网络图片 canvas 是截取不到的 涉及到跨域问题
具体解决方法可参考: