uniapp海报生成并且保存到本地

uniapp海报生成并且保存到本地

1.下载

npm i html2canvas
npm i image-tools --save

2.引入

import canvas from 'html2canvas'
import {pathToBase64,base64ToPath} from 'image-tools'

3.实现代码

<template>
	<view class="canvas_bj">
		<view id="img_bj">
			<image src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/87a0a0d0-60aa-11eb-8ff1-d5dcf8779628.png" class="img"></image>
		</view>
		<button @click="ts.plot">生成</button>
	</view>
</template>

<script module='ts' lang="renderjs">
	import canvas from 'html2canvas'
	export default {
		data() {
			return {

			}
		},
		methods: {
			plot(e, call) {
				const el= document.getElementById("img_bj")
				canvas(el, {
					width: el.clientWidth, //实际宽
					height: el.clientHeight, //实际高
					scrollX: 0,
					scrollX: 0
				}).then((canvas) => {
					// toDataURL是转为base64格式图片
					call.callMethod('acceptData', canvas.toDataURL())
				})
			}
		}
	}
</script>
<script>
	import {base64ToPath} from 'image-tools'
	export default {
		data() {
			return {
			}
		},
		methods: {
			acceptData(val){
				base64ToPath(val)//base64ToPath将图像base64格式转为文件路径
					.then(path => {
						uni.getImageInfo({
							src: path,
							success: (res) => {
								 uni.saveImageToPhotosAlbum({
									filePath:res.path,
									success: (res) => {
										console.log(res)
									}
								})
							}
						})
					})
					.catch(error => {
						console.error(error)
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
        .canvas_bj {
		width: 100%;
		height: 100%;
            .img {
                width: 200rpx;
                height: 200rpx;
                display: block;
                margin: 0 auto;
            }
		}
	}
</style>