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，一经查实，立即删除！

相关文章

React之引入css的方式

React之引入css的方式

一、是什么 组件式开发选择合适的css解决方案尤为重要 通常会遵循以下规则&#xff1a; 可以编写局部css&#xff0c;不会随意污染其他组件内的原生&#xff1b;可以编写动态的css&#xff0c;可以获取当前组件的一些状态&#xff0c;根据状态的变化生成不同的css样式&#…
阅读更多...
SpringCloud-Sentinel

SpringCloud-Sentinel

一、介绍 &#xff08;1&#xff09;提供界面配置配置服务限流、服务降级、服务熔断 &#xff08;2&#xff09;SentinelResource的blockHandler只处理后台配置的异常&#xff0c;运行时异常fallBack处理&#xff0c;且资源名为value时才生效&#xff0c;走兜底方法 二、安装…
阅读更多...
Anaconda创建新的虚拟环境及Jupyter Notebok中、PyCharm中环境的使用

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

Anaconda创建新的虚拟环境 在windows开始菜单中【徽标键】&#xff0c;查找Anaconda文件夹并打开【Anaconda Prompt】 查看已有虚拟环境 conda env list1.创建 conda create --name mytest python3.7 # 创建一个名称为mytest&#xff0c;python版本为3.7的虚拟环境输入【…
阅读更多...
济南双软认定办理流程，软件企业认定申报材料

济南双软认定办理流程，软件企业认定申报材料

具体流程及需要材料&#xff1a; 第一步&#xff1a;软件着作权 材料&#xff1a;源代码前后各30页&#xff0c;软件说明书&#xff0c;企业营业执照公章、软件着作权的申请表。统一提交中国版权中心?? 第二步&#xff1a;软件测评 材料&#xff1a;软件操作手册、说明书…
阅读更多...
clion本地调试nginx-1.22.1

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…
阅读更多...
Android振动器(Vibrator)

Android振动器(Vibrator)

1.获取权限 振动器权限仅需静态申请 在清单文件中声明&#xff1a;android.permission.VIBRATE <uses-permission android:name"android.permission.VIBRATE"/> 2.振动器的使用 //获取系统服务-振动器 Vibrator vibrator (Vibrator) getSystemService(VIB…
阅读更多...
Redis的持久化策略：RDB与AOF（面试题详解）

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

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;教育行业如何通过互联网推广品牌。 一、 发布软文进行品牌推广 数字…
阅读更多...
js到vue到react的发展

js到vue到react的发展

介绍&#xff1a; JavaScript是一种基于对象和事件驱动的编程语言&#xff0c;在Web开发中占据着重要的地位。随着前端技术的不断发展&#xff0c;出现了一系列的框架和库&#xff0c;Vue和React是其中较为知名的两个。 Vue是一个轻量级的JavaScript框架&#xff0c;由尤雨溪…
阅读更多...
项目部署Linux一般步骤

项目部署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-…
阅读更多...
Android 使用 ToneGenerator 实现按键提示音

Android 使用 ToneGenerator 实现按键提示音

Android 使用 ToneGenerator 实现按键提示音 外部链接简单效果功能简单实现工具类线程池工具主页面简单实现 外部链接 DTMF原理 处理音频输出的变化 ToneGenerator API 简单效果 功能简单实现 工具类 package com.xg.practise.utilimport android.app.Activity import and…
阅读更多...
2023年【安全生产监管人员】考试题及安全生产监管人员考试内容

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

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【安全生产监管人员】考试题及安全生产监管人员考试内容&#xff0c;包含安全生产监管人员考试题答案和解析及安全生产监管人员考试内容练习。安全生产模拟考试一点通结合国家安全生产监管人员考试最新大纲及安…
阅读更多...
(完全解决)如何输入一个图的邻接矩阵（每两个点的亲密度矩阵affinity）,然后使用sklearn进行谱聚类

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

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

Python学习8

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

unity save load系统 快速搭建

我的最终目标是快读建立一个关卡数据自动读入储存功能&#xff1a; 1. 每个关卡有自己的编号&#xff0c;如果没有自定义该关卡&#xff0c;则读取默认编号的初始布局&#xff0c;如果有自定义该关卡&#xff0c;则读取新定义的关卡。 2.在游戏中如果对布局做出了更改&#x…
阅读更多...
浅谈现代建筑照明中的智能照明控制系统

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

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

JavaScript 原型链污染

1.prototype是一个类的属性&#xff0c;所有类对象在实例化的时候将会拥有prototype中的属性和方法2.一个对象的proto属性&#xff0c;指向这个对象所在的类的prototype属性1.每个构造函数(constructor)都有一个原型对象(prototype)2.对象的proto属性&#xff0c;指向类的原型对…
阅读更多...
MES生产管理系统与供应链协同管理

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

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

RabbitMQ 消息模型

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

Copyright @ 2022~2023