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 是截取不到的 涉及到跨域问题

具体解决方法可参考:

将URL图片链接转换成base64__dalianmiao的博客-CSDN博客