uniapp用html2canvas将图片和文字部分截取保存到本地相册

港控/mmm° 2024-04-01 12:06 57阅读 0赞

#### 类实现对整个或者部分页面进行截屏 ####

*  效果
 *  下载插件
 *  引入
 *  所有代码

## 效果 ##

![在这里插入图片描述][9aacdea27b464f8e88b93019312a9a31.png_pic_center]

## 下载插件 ##

官网链接: [http://html2canvas.hertzen.com/][http_html2canvas.hertzen.com]  
可以`npm`安装`npm install --save html2canvas`或者直接去官网下载文件引入 我这里是直接下载的官网文件

## 引入 ##

如图所示，`uniapp`不可以直接操作DOM，所以要新建一个`script`

![在这里插入图片描述][367f73db89954945b8887895dc6b811c.png_pic_center]

## 所有代码 ##

<template>
    	<view>
    		
    		<view class="share animated">
    			<image class="image2" src="../../static/img/cha.png"></image>
    			<view style="height: 180rpx;"></view>
    			
    			<view class="image" id="htmlCanvas">
    				<view class="text">
    					<view class="yanyu">落花人独立。微雨燕雙飞。</view>
    				</view>
    				<view class="author">燕子齐</view>
    				<view style="width: 361rpx;"></view>
    			</view>
    			
    			<image @click="renderScript.emitData" class="image3" src="../../static/img/xiazai.png"></image>
    		</view>
    	</view>
    </template>
    
    
    <script>
    	export default {
        
    		data() {
        
    			return {
        
    			}
    		},
    		methods: {
        
    			// 关闭图片展示
    			closedShare() {
        
    			},
    			receiveRenderData(val) {
        
    				uni.showLoading({
        
    					title:"下载中"
    				})
    				let that=this
    				let base64 = val
    				const bitmap = new plus.nativeObj.Bitmap("test");
    				bitmap.loadBase64Data(base64, function() {
        
    					const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
    					bitmap.save(url, {
        
    							overwrite: true,  // 是否覆盖
    							// quality: 'quality'  // 图片清晰度
    					}, (i) => {
        
    						uni.saveImageToPhotosAlbum({
        
    							filePath: i.target,
    							success: function() {
        
    								uni.hideLoading()
    								uni.showToast({
        
    									title: '图片保存成功',
    									icon: 'none'
    								})
    								bitmap.clear()
    							}
    						});
    					}, (e) => {
        
    						uni.hideLoading()
    						uni.showToast({
        
    							title: '图片保存失败',
    							icon: 'none'
    						})
    						bitmap.clear()
    					});
    				}, (e) => {
        
    					uni.hideLoading()
    					uni.showToast({
        
    						title: '图片保存失败',
    						icon: 'none'
    					})
    					bitmap.clear()
    				});
    			},
    		}
    	}
    </script>
    <script module="renderScript" lang="renderjs">
    	import html2canvas from '@/util/html2canvas.js';
    	export default {
        
    		data() {
        
    			return {
        
    				
    			}
    		},
    		mounted() {
        },
    		methods: {
        
    			// 发送数据到逻辑层
    			emitData(e, ownerVm) {
        
    				const dom = document.getElementById('htmlCanvas')
    				html2canvas(dom, {
        
    					width: dom.clientWidth, //dom 原始宽度
    					height: dom.clientHeight,
    					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
    					scrollX: 0,
    					dpi:300,
    					useCORS: true, //支持跨域，但好像没什么用
    					allowTaint: false
    				}).then((canvas) => {
        
    					// 将生产的canvas转为base64图片3
    					ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
    				});
    
    			}
    		}
    	};
    </script>
    
    <style lang="scss" scoped>
    	.share {
        
    		height: 100vh;
    		
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		
    		// position: absolute;
    		// z-index: 999;
    		.image {
        
    			width: 722rpx;
    			height: 552rpx;
    			padding: 36rpx 36rpx;
    			box-sizing: border-box;
    			
    			background: url('../../static/img/crad_img.png');
    			background-size: 100% 100%;
    			
    			box-shadow: 0 6rpx 13rpx 0 rgba(0,0,0,0.08);
    			position: relative;
    		}
    		.m-t-88 {
        
    			margin-top: 162rpx;
    		}
    		.image2 {
        
    			position: absolute;
    			top: 60rpx;
    			right: 40rpx;
    			width: 44rpx;
    			height: 44rpx;
    		}
    		.image3 {
        
    			position: absolute;
    			left: 50%;
    			bottom: 150rpx;
    			transform: translate(-50%);
    			width: 132rpx;
    			height: 132rpx;
    		}
    		.flex-center {
        
    			display: flex;
    			align-items: center;
    			justify-content: center;
    		}
    		.text {
        
    			width: 361rpx;
    			
    			font-size: 32rpx;
    			font-weight: 900;
    			color: #414141;
    			line-height: 50rpx;
    			writing-mode:vertical-lr;
    			letter-spacing: 6rpx;
    			
    			display: flex;
    			flex-direction: column;
    			.yanyu {
        
    				height: 192rpx;
    			}
    		}
    		.author {
        
    			font-size: 32rpx;
    			font-weight: 900;
    			color: #414141;
    			line-height: 50rpx;
    			writing-mode:vertical-lr;
    			letter-spacing: 6rpx;
    			
    			position: absolute;
    			bottom: 36rpx;
    			right: 53%;
    		}
    	}
    </style>

[9aacdea27b464f8e88b93019312a9a31.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a1c04960be8f45468bb06a8c7a073dcc.png
[http_html2canvas.hertzen.com]: http://html2canvas.hertzen.com/
[367f73db89954945b8887895dc6b811c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d44a9c1be93a4a7986282521b86aa346.png