UNIAPP-H5保存海报

最新推荐文章于 2024-07-27 10:30:37 发布

搞前端的漠北同学

最新推荐文章于 2024-07-27 10:30:37 发布

阅读量696

点赞数 2

文章标签： uni-app

本文链接：https://blog.csdn.net/m0_50855633/article/details/133985516

版权

UNIAPP-H5保存海报

将当前屏幕内容转换为图片，保存到本地

近期在做H5项目时，前端使用 uqrcode uqrcode中文文档生成了动态二维码，但是分享时成为了难题，由于微信浏览器只能分享图片，并且无法通过直接下载的方式保存图片。这一下我就犯了难。
这是uniapp官方的保存图片的API，居然不支持H5???

uniapp的官方API
于是我的设想就是把当前容器作为Canvas画布，直接使用canvas进行转换base64，最后通过 <image src="src" /> 来显示这张图片。这也是目前大多数H5的分享做法。
经过的3*7=21的努力下，最后效果并不是很理想，于是便各种搜索，最后发现了这个名为html2canvas的npm包
地址：npm包地址
GIT地址：git地址
使用方法也很简单：

首先就是通过npm安装即可

npm i html2canvas --save

在需要的页面上引用

import html2canvas from 'html2canvas';

将需要转换的容器通过原生document.getElementById()方式或者其他获取DOM方式进行获取,我这里就不一一举例了，我是习惯性使用ID选择器获取DOM。
定义转换方法

const element = document.getElementById('canvasImg'); // 需要导出/转换的页面
html2canvas(element, {
		allowTaint: true,//是否允许跨源图像污染画布
		useCORS: true,//是否尝试使用 CORS 从服务器加载图像 
	}).then((canvas) => {
		// imgUrl 是图片的 base64格式 代码 png 格式
		const imgUrl = canvas.toDataURL('image/png');
		console.log(imgUrl);//获取到的url（base64）地址;
	});

最后我把整个项目的代码贴上，方便CV体验下面是演示操作（安卓）：
请添加图片描述

整体代码，直接CV到编辑器即可查看，整体思路就是将当前的容器作为一整个画布，容器内的所有内容通过canvas进行绘制并转换为base64，然后通过 vif 和 velse 进行显示，这样便可以实现长按图片分享。由于微信浏览器下载文件限制，无法直接下载到本地，通过浏览器直接可以下载到本地相册查看。

<template>
	<view class="haibao-content" id="canvasImg" v-if="!screenshot">
		<image src="../../static/hb.jpg" mode="widthFix" style="width: 100vw"></image>
		<view class="qrcode">
			<uqrcode class=".er_wei" ref="uqrcode" canvas-id="qrcode" :value="value" :options="{ margin: 10 }"></uqrcode>
		</view>
		<view class="transImage">
			<button @click="transImage">转图标长按保存或转发朋友</button>
		</view>
	</view>

	<view class="" v-else>
		<image :src="screenshot" mode="widthFix" style="width: 100%"></image>
	</view>
</template>

<script setup lang="ts">
import html2canvas from 'html2canvas';
import { ref } from 'vue';
let value = ref('https://uqrcode.cn/doc');
let screenshot = ref(''); //是否已经转换为base64
const transImage = () => {
	uni.showLoading({
		title: '正在转换...'
	});
	//点击保存按钮的回调事件
	const element = document.getElementById('canvasImg'); // 需要导出的页面
	html2canvas(element, {
		allowTaint: true,
		useCORS: true
	}).then((canvas) => {
		// imgUrl 是图片的 base64格式 代码 png 格式
		const imgUrl = canvas.toDataURL('image/png');
		console.log(imgUrl);
		screenshot.value = imgUrl;
		//下载图片的功能。
		downloadIamge(imgUrl, 'plantCardImg.png');
		uni.hideLoading();
	});
	// }
};
const downloadIamge = (imgsrc, name) => {
	//下载图片地址和图片名
	const image = new Image();
	// 解决跨域 Canvas 污染问题
	image.setAttribute('crossOrigin', 'anonymous');
	image.onload = function () {
		let canvas = document.createElement('canvas');
		canvas.width = image.width;
		canvas.height = image.height;
		const context = canvas.getContext('2d');
		context.drawImage(image, 0, 0, image.width, image.height);
		const url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
		const a = document.createElement('a'); // 生成一个a元素
		const event = new MouseEvent('click'); // 创建一个单击事件
		a.download = name || 'photo'; // 设置图片名称
		a.href = url; // 将生成的URL设置为a.href属性
		a.dispatchEvent(event); // 触发a的单击事件
	};
	image.src = imgsrc;
};
</script>

<style scoped lang="scss">
.haibao-content {
	width: 100%;
	position: relative;
	.qrcode {
		width: 200px;
		height: 200px;
		position: absolute;
		left: 50%;
		bottom: 100px;
		transform: translate(-50%, 0);
	}
	.transImage {
		position: absolute;
		left: 50%;
		bottom: 20px;
		transform: translate(-50%, 0);
		width: 80%;
	}
}
</style>