html2canvas将html内容生成canvas图片实现方式

约定不等于承诺〃 2022-08-31 15:24 529阅读 0赞

所实现功能：图片、文字合成一张图，并在H5中下载所生成图片。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70][]

**实现方式**

借用html2canvas.js实现，开发环境：uniapp实现的H5移动项目

**界面部分**

<-- html -->
    <view class="resultBox">
    	<view id="resUploadBox" class="resUploadBox">
    		<view class="imgBox">
    			<img src="../static/images/certificate.png">
    		</view>
    		<view class="conBox">
    			<view class="conCommon name">
    				张三
    			</view>
    			<view class="conCommon idCard">
    				123333333
    			</view>
    			<view class="conCommon num">
    				TP333245
    			</view>
    		</view>
    		<img class="resImg" id="html2Image" src="" alt="">
    	</view>
    	<view class="mes">
    		长按图片，下载证书
    	</view>
    </view>
    
    
    // css部分代码
    <style lang="scss" scoped>
    .resultBox{width: 95%;height:300px;position: relative;margin: 30px auto;
    	.resUploadBox{position: relative;}
    	.imgBox{width: 100%;
    		img{width:100%;}
    	}
    	.conBox{position: absolute;top:0;left:0;font-size: 14px;z-index: 10;
    		.conCommon{position: absolute;font-size: 14rpx;transform : scale(0.9);}
    		.name{
    			top: 160rpx;white-space: nowrap;
    			left: 120rpx;}
    		.idCard{
    			top: 160rpx;
    			left: 295rpx;}
    		.num{
    			top: 358rpx;
    			left: 135rpx;}
    	}
    	uni-button{    height: 30px !important;
        line-height: 30px !important;
        font-size: 14px !important;
        width: 50px !important;
        border-radius: 10px !important;float: right;margin:25rpx 20rpx 0 0;}
    	.mes{text-align: center;
        color: #4f9ccf;
        font-size: 14px;}
    	.resImg{width:100%;position: absolute;top: 0;left: 0;background-color: #fff;opacity: 0;}
    }
    </style>

**js部分**

1、安装html2canvas

npm install html2canvas --save

2、在项目中引入

import html2canvas from 'html2canvas';

3、methods方法部分代码

// 图片截屏生成
        html2Image() {
        	// 解决图片不全问题
        	window.pageYoffset = 0;
        	document.documentElement.scrollTop = 0;
        	document.body.scrollTop = 0;
        	// canvas截屏 
            html2canvas(document.getElementById("resUploadBox"), {
        		scale: 2,
        		useCORS: true, // 是否尝试使用CORS从服务器加载图像
        		async: false, // 是否异步解析和呈现元素
        		// 以下字段必填
        		background: "#fff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
        		dpi: 300, // 处理模糊问题
        		}).then(function (canvas) {
                    var dataUrl = canvas.toDataURL("image/jpeg");
                    document.getElementById("html2Image").src = dataUrl;
            });
        }

**特别说明**

在实现过程中那个所遇到的一些问题

**1、生成的图片显示不全**

滚轮滑动造成的，主要原因是，html2canvas是根据body来截屏的，如果所截取的部分超过了body区域，就会出现这个问题。

解决方式：截图前先将滚轮置顶

// 解决图片不全问题
    window.pageYoffset = 0;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;

**2、生成的图片模糊**

**首先通过设置增大dpi**

DPI 是指每英寸的像素，也就是扫描精度。DPI 越低，扫描的清晰度越低，由于受网络传输速度的影响，web 上使用的图片都是 72dpi，但是冲洗照片不能使用这个参数，必须是 300dpi 或者更高 350dpi。

（注：经测此方法无效）

**通过放大图片scale**

一开始设置scale=1，图片模糊，后scale=2有效

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70]: /images/20220829/c95bc722a0ef4ee5a1f8b88a8188555f.png