2023 uniapp( vue3 + TS )使用canvas生成海报并保存,taro/微信小程序也适用

有段时间没写vue了,有点生疏了......

1、代码有注释,完整代码如下

<template><view class="page"><canvas class="canvas" v-if="isShow" :style="{width:`${canvasWidth}px`,height:`${canvasHeight}px`}":canvas-id="canvasId"></canvas><view class="tool"><u-button @click="nextImg" :custom-style="buttonCustomStyle" text="下一张"color="linear-gradient(to right, #232526, #414345)"></u-button><u-button @click="save" :custom-style="buttonCustomStyle" text="保存图片"color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button></view></view>
</template><script setup lang="ts">import { onMounted, reactive, ref, watch } from "vue";import { getImgBase64, drawRoundedRect, drawText, getSystemInfo } from "@/utils/canvas";import { imageList } from './utils'import type { ImageListType } from './utils'import { getAuthorize } from "@/utils";// 按钮样式const buttonCustomStyle = reactive({width: '49%',});// const color = '#f7f6ff'const offsetNumber : number = 20;const listHeight : number = 66;const context = ref(null)const pageColor = ref(imageList[0].pageColor)const canvasId = ref<string>(String(`canvasId${new Date().getTime()}`))const isShow = ref<boolean>(false)const imageObj = ref<ImageListType>(imageList[0])const imgTemp = ref<string>(wx.env.USER_DATA_PATH + `/${new Date().getTime()}-temp.png`) //图片存储的临时路径const canvasWidth = ref<number>(0)// canvas宽度const canvasHeight = ref<number>(0)// canvas宽度const canvasWidthRate = ref<number>(0.8)//canvas基于屏幕宽度占比,随便设置,我这里设置占屏幕宽度的百分之八十// 绘制图片,并转成base64const drawBgImg = async () => {// 图片临时地址重新赋值,避免图片加载路径都是一样的imgTemp.value = wx.env.USER_DATA_PATH + `/${new Date().getTime()}-temp.png`const ctx = context.valueconst { imgUrl, imageWidth, imageHeight } = await getImgBase64({src: imageObj.value.imageSrc,canvasWidth: canvasWidth.value,filePath: imgTemp.value})canvasHeight.value = canvasHeight.value + imageHeight //重新计算画布总高度// 填充背景矩阵drawRoundedRect(ctx, 0, 0, canvasWidth.value, canvasHeight.value, {fillColor: imageObj.value.bgColor,leftBottom: true,leftTop: true,rightBottom: true,rightTop: true,r: 5})// 图片如何居中呢?// 当前画布宽度 - 图片宽度 = 空出来的间隙// 图片居中 = 空出来的间隙 / 2 = x 轴起点 x = canvasWidth.value - imageWidth) / 2ctx.drawImage(imgUrl, (canvasWidth.value - imageWidth) / 2, offsetNumber, imageWidth, imageHeight);}// 绘制文字const drawTxt = async () => {const ctx = context.valueconst offsetY = canvasHeight.value// 填充矩形背景drawRoundedRect(ctx, 0, canvasHeight.value, canvasWidth.value, listHeight, {fillColor: imageObj.value.bgColor,});// 绘制文字drawText({ctx,text: imageObj.value.name,fillStyle: '#000000',fontSize: 22,x: (canvasWidth.value / 2),y: offsetY + 25,center: true})// 绘制文字drawText({ctx,text: imageObj.value.desc,fillStyle: '#000000',fontSize: 16,x: (canvasWidth.value / 2),y: offsetY + 25 + 25,center: true})//画布高度重新计算canvasHeight.value = canvasHeight.value + listHeight}// 初始化canvasconst initCanvas = async () => {try {uni.showLoading()const { windowWidth } : any = await getSystemInfo()const ctx = context.valuecanvasHeight.value = offsetNumber;//初始化高度canvasWidth.value = windowWidth * canvasWidthRate.value//初始化宽度await drawBgImg()await drawTxt()ctx.draw()} finally {uni.hideLoading()}}onMounted(() => {isShow.value = true})watch(isShow, () => {if (isShow.value) {canvasId.value = String(`canvasId${new Date().getTime()}`)//由于存在多次绘制,避免ID重复,需要重新赋值context.value = uni.createCanvasContext(canvasId.value)//由于存在多次绘制,所以每次都重新创建新的画布实例initCanvas()}})// 下一张图const nextImg = () => {isShow.value = falseimageObj.value = imageList[imageObj.value.id + 1] ?? imageList[0]pageColor.value = imageObj.value.pageColorsetTimeout(() => {isShow.value = true}, 100)}// 图片添加到相册const addIamgeToAlbum = async () => {try {const { tempFilePath } = await uni.canvasToTempFilePath({canvasId: canvasId.value,});console.log('tempFilePath', tempFilePath);await uni.saveImageToPhotosAlbum({filePath: tempFilePath})uni.showToast({title: '保存成功!'})} catch {}}// 保存const save = async () => {try {uni.showLoading()// 获取用户设置const { authSetting } = await uni.getSetting()// 没有权限的时候if (!authSetting['scope.writePhotosAlbum']) {await getAuthorize('scope.writePhotosAlbum', {title: '请授权保存到相册',callback: addIamgeToAlbum})return}addIamgeToAlbum()} catch (err) {} finally {uni.hideLoading()}}
</script><style lang="scss" scoped>.page {background-color: v-bind(pageColor);height: 100vh;overflow: hidden;.canvas {margin: 20px auto 0;}.tool {width: 100%;display: flex;align-items: center;justify-content: center;position: fixed;bottom: 0;left: 0;right: 0;}}
</style>

1.1、工具函数 - canvas.ts

//utils/canvas.ts
const fs = uni.getFileSystemManager()// 将Base64写入本地文件
const base64WriteFile = (filePath : string, data : string) => {return new Promise((resolve, reject) => {fs.writeFile({filePath,data,encoding: 'base64',success: (res) => {resolve(res);},fail: (err) => {reject(err);},});});
};
// 参数的类型校验
type GetImgBase64Type = {src : string;//图片地址(本地/在线地址)canvasWidth : number;//画布宽度filePath : string//临时路径
}
// 加载图片地址,生成base64并写入临时路径中
export const getImgBase64 = async (params : GetImgBase64Type) => {const { src, canvasWidth, filePath } = paramstry {// 获取图片信息:地址、宽高const imgInfo = await uni.getImageInfo({src,});// 计算图片在画布中的宽度const imageWidth = canvasWidth * 0.8;//随便定的,多少px都行// // 根据比例计算图片在画布中的高度const scaleFactor = Number((imageWidth / imgInfo.width).toFixed(2));// 根据比例计算图片高度const imageHeight = imgInfo.height * scaleFactor;// 生成base64const base64 : any = fs.readFileSync(imgInfo.path, 'base64')// 写入本地await base64WriteFile(filePath, base64)const currentImgInfo = await uni.getImageInfo({src: filePath,});return {imageWidth,imageHeight,imgUrl: currentImgInfo.path}} catch (err) {console.log('err', err);}};type DrawRoundedRectParamsType = {leftTop ?: boolean;leftBottom ?: boolean;rightTop ?: boolean;rightBottom ?: boolean;fillColor ?: string;r ?: number;
};
// canvas 绘制自定义圆角矩形
export const drawRoundedRect = (ctx : any,x : number,y : number,w : number,h : number,params ?: DrawRoundedRectParamsType,
) => {const {leftTop = false,leftBottom = false,rightTop = false,rightBottom = false,fillColor = 'transparent',r = 0,} = params || {};ctx.save(); // 保存当前绘图状态 防止虚线影响其他图形ctx.beginPath();ctx.setFillStyle(fillColor);ctx.setStrokeStyle('transparent');ctx.moveTo(x + r, y);// 绘制上边线和左上角圆弧if (leftTop) {ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);ctx.lineTo(x, y);} else {ctx.moveTo(x, y + r);ctx.lineTo(x, y);ctx.lineTo(x + r, y);}ctx.lineTo(x + w - r, y);// 绘制上边线和右上角圆弧if (rightTop) {ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);} else {ctx.lineTo(x + w - r, y);ctx.lineTo(x + w, y);ctx.lineTo(x + w, y + r);}ctx.lineTo(x + w, y + h - r);// 绘制下边线和右下角圆弧if (rightBottom) {ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);} else {ctx.lineTo(x + w, y + h - r);ctx.lineTo(x + w, y + h);ctx.lineTo(x + w - r, y + h);}ctx.lineTo(x + r, y + h);// 绘制下边线和左下角圆弧if (leftBottom) {ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);} else {ctx.lineTo(x + r, y + h);ctx.lineTo(x, y + h);ctx.lineTo(x, y + h - r);}ctx.lineTo(x, y + r);// 绘制左边线和左上角圆弧if (leftTop) {ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);ctx.moveTo(x + r, y);} else {ctx.moveTo(x, y + r);ctx.lineTo(x, y);ctx.lineTo(x + r, y);}ctx.fill();ctx.closePath();ctx.stroke();ctx.restore(); // 恢复之前的绘图状态
};
type DrawTextConfigType = {ctx : any;fillStyle : string;//填充颜色fontSize : number//文字大小text : string;//在画布上输出的文本x : number;//绘制文本的左上角x坐标位置y : number//绘制文本的左上角y坐标位置center ?: boolean
}
// 绘制文本
export const drawText = (config : DrawTextConfigType) => {const { fillStyle, fontSize, x, y, text, ctx, center = false } = configctx.setFillStyle(fillStyle);ctx.setFontSize(fontSize);if (center) {ctx.textAlign = 'center';//文字水平居中}ctx.fillText(text, x, y);
}
// 获取当前设备信息
export const getSystemInfo = () => {return new Promise((resolve) => {uni.getSystemInfo({success(res) {resolve(res)},})})
}

1.2、工具函数 - index.ts

//utils/index.ts
// 获取用户授权
type GetAuthorizeType = {title ?: string;//授权弹框描述callback ?: () => void//成功的回调
}
export const getAuthorize = (scope : string, params : GetAuthorizeType) => {const { title = '请开启授权', callback } = paramsreturn new Promise(() => {uni.authorize({scope,success: () => {callback?.()},fail: () => {// 如果用户点了拒绝,需要弹框提示再次授权uni.showModal({title,success() {uni.openSetting();},});}})})
}

1.3、图片列表函数

// ./utils/index.ts
export type ImageListType = {id : number;name : stringdesc : stringimageSrc : stringbgColor : stringpageColor : string
}
export const imageList : ImageListType[] = [{id: 0,name: '那维莱特',desc: '潮水啊,我已归来!',imageSrc: '../../static/那维莱特.jpg',bgColor: '#b2d4ff',pageColor: '#d9e9ff',},{id: 1,name: '东方镜',desc: '太阳之下,诸世皆影!',imageSrc: '../../static/镜.jpg',bgColor: '#ffdecd',pageColor: '#fff3ed',},{id: 2,name: '魈',desc: '你去吧,我会在这里等你。',imageSrc: '../../static/魈.png',bgColor: '#f1ddff',pageColor: '#fbf4ff',},{id: 3,name: '琴团长',desc: '我以此剑起誓,必将胜利献给你!',imageSrc: '../../static/琴.jpg',bgColor: '#e6e4ff',pageColor: '#f7f6ff',},
]

2、效果如下

                                

                

3、添加相册授权

根据各自框架添加授权即可,比如uniapp在manifest.json下

    "mp-weixin" : {"appid" : "你的微信appid","setting" : {"urlCheck" : false},"usingComponents" : true,/* 授权 */"permission": {"scope.writePhotosAlbum": {"desc": "请授权保存到相册"}}},

4、项目地址

我的项目地址,点击跳转

5、问题总汇

5.1、为什么本地图片/在线图片真机不显示等?

将所有用到的图片转 base64 展示,参考上面工具函数中的 getImgBase64()

5.2、多文本如何换行?

参考下面地址  使用canvas画布时多行文本应该怎么换行? | 微信开放社区  

5.3、多次绘制出现白屏等?

比如以弹框的形式多次点击生成等情况,首先要确保每个canvas-idID的实例不能重复。可以参考我上面标题1中的代码。

5.4、当ctx.draw()后需要立马回去临时路径做 image预览时,画布生成的内容不全?

5.4.1、前提情景

由于 canvas 的层级比较高,做预览的时候会遮住其他的view等标签。而且样式或拖拽等也不好处理,花费时间肯定更多一点,这个时候需要用 <image src="图片的临时路径" mode=""></image> 代替 canvas 做展示。

5.4.2、解决

改写ctx.draw()为如下:

		ctx.draw(false,setTimeout(async () => {//在这里生成临时路径const { tempFilePath } = await uni.canvasToTempFilePath({canvasId: canvasId.value,});console.log('tempFilePath', tempFilePath);await uni.saveImageToPhotosAlbum({filePath: tempFilePath})}, 100),);

由于绘制可能需要更长的时间,通过延时器即可解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116678.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud-Sentinel

一、介绍 &#xff08;1&#xff09;提供界面配置配置服务限流、服务降级、服务熔断 &#xff08;2&#xff09;SentinelResource的blockHandler只处理后台配置的异常&#xff0c;运行时异常fallBack处理&#xff0c;且资源名为value时才生效&#xff0c;走兜底方法 二、安装…

Anaconda创建新的虚拟环境及Jupyter Notebok中、PyCharm中环境的使用

Anaconda创建新的虚拟环境 在windows开始菜单中【徽标键】&#xff0c;查找Anaconda文件夹并打开【Anaconda Prompt】 查看已有虚拟环境 conda env list1.创建 conda create --name mytest python3.7 # 创建一个名称为mytest&#xff0c;python版本为3.7的虚拟环境输入【…

clion本地调试nginx-1.22.1

1 概述 nginx是一个多进程模型的流量代理软件&#xff0c;在本地调试时需要将它设置为单进程模式。 2 下载nginx源码 mkdir -p /opt/third-party cd /opt/third-party wget http://nginx.org/download/nginx-1.22.1.tar.gz tar xf nginx-1.22.1.tar.gz ls /opt/third-party…

Redis的持久化策略:RDB与AOF(面试题详解)

文章来源&#xff1a;Redis持久化的两种方式&#xff1a;RDB与AOF&#xff08;详解&#xff09;&#xff0c;订正了一些错误 一、概述&#xff1a; RDB和AOF持久化的由来&#xff1f; 因为Redis中的数据是基于内存的&#xff0c;所以如果出现服务器断电或者服务器宕机&#xf…

Java SOAP 调用 C# 的WebService

Java SOAP 调用 C# 的WebService&#xff0c;C# 的WebService方法的创建可以参考上一篇文章。IntelliJ IDEA Community Edition 2021.2.3的idea64.exe新建项目&#xff0c;导入需要的jar&#xff0c;代码如下&#xff1a; import org.apache.axis.client.Service; import org.…

教育行业如何通过互联网推广品牌?媒介盒子告诉你

近年来&#xff0c;国民对教育的重视程度日趋上升&#xff0c;教育行业也日益壮大&#xff0c;数字化时代的来临也使教育行业推广品牌的方式更加多样化&#xff0c;接下来媒介盒子就和大家分享&#xff1a;教育行业如何通过互联网推广品牌。 一、 发布软文进行品牌推广 数字…

项目部署Linux一般步骤

1、最小化安装centos7-环境准备 安装epel-release 安装epel-release&#xff0c;因为有些rpm包在官方库中找不到。前提是保证可以联网 yum install -y epel-release 修改IP net-tools net-tool&#xff1a;工具包集合&#xff0c;包含ifconfig等命令 yum install -y net-…

2023年【安全生产监管人员】考试题及安全生产监管人员考试内容

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【安全生产监管人员】考试题及安全生产监管人员考试内容&#xff0c;包含安全生产监管人员考试题答案和解析及安全生产监管人员考试内容练习。安全生产模拟考试一点通结合国家安全生产监管人员考试最新大纲及安…

(完全解决)如何输入一个图的邻接矩阵(每两个点的亲密度矩阵affinity),然后使用sklearn进行谱聚类

文章目录 背景输入点直接输入邻接矩阵 背景 网上倒是有一些关于使用sklearn进行谱聚类的教程&#xff0c;但是这些教程的输入都是一些点的集合&#xff0c;然后根据谱聚类的原理&#xff0c;其会每两个点计算一次亲密度&#xff08;可以认为两个点距离越大&#xff0c;亲密度越…

Python学习8

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…

浅谈现代建筑照明中的智能照明控制系统

安科瑞 华楠 摘要&#xff1a;随着我国经济、技术的不断发展&#xff0c;科学技术在建筑中的应用不断地扩大&#xff0c;人们对物质文化和精神生活水平有了更高的追求&#xff0c;就当今建筑的发展来说&#xff0c;智能化已经成为主流&#xff0c;涵盖多个方面&#xff0c;包括…

MES生产管理系统与供应链协同管理

MES生产管理系统在制造业中发挥着越来越重要的作用&#xff0c;它与供应链管理密切相关&#xff0c;对于提高供应链的协同和优化有着重要的意义。本文将探讨MES管理系统与供应链管理之间的关系&#xff0c;包括实时数据共享、生产计划协调和供应链效率提升等方面。 MES系统能够…

RabbitMQ 消息模型

参考 ​​​​​​【RabbitMQ】RabbitMQ架构模型_rabbitmq结构模型-CSDN博客 之前的学习都只是知道名字&#xff0c;但并没有真正的理解&#xff0c;每次看还是不懂&#xff0c;所以今日理解透 &#xff01; RabbitMQ 收发消息过程如下&#xff1a; 首先从消费者开始&#xff1…

OpenCV视频车流量识别详解与实践

视频车流量识别基本思想是使用背景消去算法将运动物体从图片中提取出来&#xff0c;消除噪声识别运动物体轮廓&#xff0c;最后&#xff0c;在固定区域统计筛选出来符合条件的轮廓。 基于统计背景模型的视频运动目标检测技术&#xff1a; 背景获取&#xff1a;需要在场景存在…

postgresql|数据库迁移|ora2pg工具的web界面介绍

前言&#xff1a; ora2pg是一个比较强大的数据库迁移工具&#xff0c;那根据名字来说&#xff0c;也可以看出来&#xff0c;这个工具主要是用来配置去O化&#xff0c;将在运行的oracle数据库迁移到postgresql数据库内的 当然了&#xff0c;我们使用此工具主要还是用命令行&am…

Windows下 MySql 5.7授权远程登陆

1.用管理员身份打开mysql Client 2.输入密码登录 3.使用mysql数据库&#xff0c;输入“use mysql” 4.查看当前服务中使用的用户 select host,user form user; 5.授权 grant all privileges on *.* to 用户名% identified by 密码 with grant option; 6.成功后&#xff0c;刷…

Docker部署SpringBoot +Vue项目流程详解(含域名 + HTTPS)

文章目录 前言1、选购服务器2、部署 Docker3、前端、后端项目打包4、配置 Dockerfile5、配置 Nginx6、配置 DockerCompose6、启动 DockerCompose 完成部署7、【可选】域名 SSL证书 前言 本次整体部署操作使用阿里云服务器&#xff0c;这里我选择的是香港地区的2核2G ECS&…

Delete `␍`eslintprettier/prettier

将CRLF改为LF 然后就消失了 除此之外,也可以修改git全局配置 git config --global core.autocrlf false

JavaScript基础知识15——专业术语:语句和表达式

哈喽&#xff0c;大家好&#xff0c;我是雷工。 今天看到了JavaScript中的专业术语&#xff1a;语句和表达式&#xff0c;以下为学习笔记。 1、表达式概念&#xff1a; 表达式是可以被求值的代码&#xff0c;JavaScript引擎会将其计算出一个具体的结果。 示例&#xff1a; a…

Babylonjs学习笔记(二)——创建基本材质

书接上回&#xff0c;这里讨论给网格添加材质&#xff01;&#xff01;&#xff01; 准备好材质 1、创建材质球 /*** 创建网格材质* param scene 场景对象* returns 材质对象*/ const createGroundMaterial(scene:Scene):StandardMaterial>{const texArray:Texture[] []// …