html2canvas 解决底部右侧有白边及图片模糊图片不完整问题的方法

html2canvas 解决底部右侧有白边及图片模糊问题的方法

内img 设置 display:block   

外部div 设置 margin: 0; /* 关键：重置margin */ padding: 0; /* 关键：重置padding */ border: 0; /* 关键：重置border */ box-sizing: border-box; /* 关键：盒模型统一 */

html2canvas 解决生成的图片不完整问题的方法

外部div 设置 overflow: visible !important;

参考代码

  // 生成海报图片并上传
        function genHaibaoAndUpload(elemId, genId, name, phone, wish) {
            try {
            	var is9g = (genId == 'haibao-gen9') ? true : false;
            	document.getElementById('card-back-content').style.transform = 'none';
            	document.getElementById(elemId).style.display = 'block';
            	document.getElementById(genId).style.display = 'none';	
				document.getElementById('make-haibao-doing').style.display = 'none';
            	if (!is9g) {
            		document.getElementById(genId).innerHTML = '';
            	}
                // 1. 获取要生成图片的DOM元素
                var haibaoDom = document.getElementById(elemId);
	            //const style = window.getComputedStyle(haibaoDom);
	            //const width = parseFloat(style.width) - 1;
	            //const height = parseFloat(style.height) - 1;
                // 2. html2canvas渲染生成canvas（可配置参数，如跨域、分辨率）
                Promise.resolve().then(() => {
	                html2canvas(haibaoDom, {
	                	backgroundColor: null,
	            		//windowWidth: width,    // 视口宽度 = 元素宽度（关键：解决右侧白边）
                		//windowHeight: height,  // 视口高度 = 元素高度（关键：解决底部白边）
	                	//width: 750,
	                	//height: is9g ? 1744 : 1445,
	                    useCORS: true, // 解决跨域图片渲染问题（关键）
						allowTaint: true,
	                    //scale: window.devicePixelRatio, // 适配高清屏，避免图片模糊
	                    scale: 3,
	                    logging: false // 关闭控制台日志
	                }).then(function(canvas) {
					    var haibaoImg = new Image();
		                haibaoImg.src = canvas.toDataURL('image/png', 1.0); // Canvas转PNG图片
		                haibaoImg.style.width = '100%';
		                haibaoImg.style.display = "block";
		                //console.log(haibaoImg.src);
		                document.getElementById(genId).appendChild(haibaoImg);
		                document.getElementById(elemId).style.display = 'none';
		                document.getElementById(genId).style.display = 'block';
						
						// 9宫格海报上传到服务端
						if (is9g) {
							goToPage('haibao-gen9');
							
							var fileName = 'hb45' + new Date().getTime();
							var file = base64ToFile(haibaoImg.src, fileName);
							uploadHaibaoData(file, name, phone, wish, 9);
						} else {
							document.getElementById('card-back-content').style.transform = 'rotateY(180deg)';
							showFlipModalAndAutoFlip();
							
							var fileName = 'hb45' + new Date().getTime();
							var file = base64ToFile(haibaoImg.src, fileName);
							uploadHaibaoData(file, name, phone, wish, 1);
						}
					});
				});
            } catch (error) {
                console.error('生成/上传异常：', error);
                alert('生成图片或上传失败');
            }
        }
        
        function base64ToFile(base64Str, fileName = 'haibao45') {
            // 1. 解析Base64头部，获取文件MIME类型（如image/png、image/jpeg）
            const base64Split = base64Str.split(',');
            const mimeStr = base64Split[0].match(/:(.*?);/)[1]; // 提取mime类型
            const fileExt = mimeStr.split('/')[1]; // 提取文件后缀（png/jpg/webp）
            // 2. Base64二进制部分转Uint8Array（二进制数据）
            const raw = window.atob(base64Split[1]);
            const rawLength = raw.length;
            const uInt8Array = new Uint8Array(rawLength);
            for (let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            // 3. Blob转File（File是Blob的子类，上传必须用File/Blob）
            // File参数：[二进制数据], 文件名(含后缀), 文件类型
			console.log(fileExt, mimeStr);
            return new File([uInt8Array], fileName + '.' + fileExt, { type: mimeStr });
        }
        
        function uploadHaibaoImage(file) {
        	try {
                const formData = new FormData();
                formData.append('upfile', file);
                // 发起POST请求
                fetch('/api/up/uploadimage', {
                    method: 'POST',
                    body: formData,
                    // 无需设置Content-Type，浏览器会自动加multipart/form-data并带边界符
                });
            } catch (err) {
                return { code: 500, msg: '上传失败：网络错误', error: err.message };
            }
        }
		
		function uploadHaibaoData(file, name, phone, wish, source) {
        	try {
                var formData = new FormData();
                formData.append('upfile', file);
                // 发起POST请求
                fetch('/api/up/uploadimage', {
                    method: 'POST',
                    body: formData,
                    // 无需设置Content-Type，浏览器会自动加multipart/form-data并带边界符
                }).then(res => {
					if (res.ok) {
					  return res.json();
					}
				  }).then(result => {
					console.log('upload:', result);
					if (result.path) {
						console.log('did');
						formData = new FormData();
						formData.append('name', name);
						formData.append('mobile', phone);
						formData.append('msg', wish);
						formData.append('hb', result.path);
						formData.append('source', source);
						fetch('/main/h2026/hd2_1/submit', {
							method: 'POST',
							body: formData,
							// 无需设置Content-Type，浏览器会自动加
						});
					}
				  });
            } catch (err) {
				console.log('err:', err.message);
                return { code: 500, msg: '上传失败：网络错误', error: err.message };
            }
        }