当前位置: 首页 > news >正文

uniapp纯前端绘制商品分享图

效果如图
在这里插入图片描述

// useMpCustomShareImage.ts

interface MpCustomShareImageData {canvasId: stringprice: stringlinePrice: stringgoodsSpecFirmName: stringimage: string
}const CANVAS_WIDTH = 500
const CANVAS_HEIGHT = 400
const BG_IMAGE = 'https://public-scjuchuang.oss-cn-chengdu.aliyuncs.com/goods_share.png'
const DEFAULT_IMAGE ='https://public-scjuchuang.oss-cn-chengdu.aliyuncs.com/mini_program/mp_default_sc.png'const loadImageInfo = (src: string): Promise<UniApp.GetImageInfoSuccessData> => {return new Promise((resolve, reject) => {uni.getImageInfo({src,success: resolve,fail: reject,})})
}// 绘制价格
const loadPrice = (ctx: any, text: string, x: number, y: number) => {ctx.font = `bold ${text.length >= 10 ? '32px' : '36px'} sans-serif`ctx.setFillStyle('#e2231a')ctx.setTextAlign('center')ctx.setTextBaseline('middle')ctx.fillText(text, x, y)
}// 绘制划线价
const loadLinePrice = (ctx: any, text: string, x: number, y: number) => {ctx.font = '20px sans-serif'ctx.setFillStyle('#999999')ctx.fillText(text, x, y)const metrics = ctx.measureText(text)ctx.strokeStyle = '#999999'ctx.lineWidth = 2const textWidth = metrics.widthctx.beginPath()ctx.moveTo(x - textWidth / 2, y)ctx.lineTo(x + textWidth / 2, y)ctx.stroke()
}// 绘制规格厂家
const loadGoodsSpecFirmName = (ctx: any, text: string, y: number) => {const maxWidth = 480ctx.font = '20px sans-serif'ctx.setFillStyle('#333')// 短文字const textWidth = ctx.measureText(text).widthif (textWidth <= maxWidth) {return ctx.fillText(text, CANVAS_WIDTH / 2, y)}// 长文字,省略显示const displayText = text.substring(0, 21) + '...'ctx.fillText(displayText, CANVAS_WIDTH / 2, y)
}const useMpCustomShareImage = () => {const set = async (data: MpCustomShareImageData): Promise<string> => {const { canvasId, price, linePrice, goodsSpecFirmName, image = DEFAULT_IMAGE } = dataconst imageWidth = 250const imageHeight = 250try {const ctx = uni.createCanvasContext(canvasId, this)const [bgImageInfo, imageInfo] = await Promise.all([loadImageInfo(BG_IMAGE),loadImageInfo(image),])// 绘制背景图ctx.drawImage(bgImageInfo.path, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)// 绘制商品图ctx.drawImage(imageInfo.path, 20, 80, imageWidth, imageHeight)// 绘制价格loadPrice(ctx, price, CANVAS_WIDTH - imageWidth / 2, 150)// 绘制划线价loadLinePrice(ctx, linePrice, CANVAS_WIDTH - imageWidth / 2, 200)// 绘制规格厂家loadGoodsSpecFirmName(ctx, goodsSpecFirmName, 360)// 绘制await new Promise<void>((resolve) => {ctx.draw(false, resolve)})// 生成分享图const { tempFilePath } = await new Promise<UniApp.CanvasToTempFilePathRes>((resolve, reject) => {uni.canvasToTempFilePath({canvasId,success: resolve,fail: reject,})},)return tempFilePath} catch (error) {console.error('生成分享图失败:', error)return image}}return { set }
}export default useMpCustomShareImage

// 调用

import useMpCustomShareImage from './useMpCustomShareImage'const mpCustomShareImage = useMpCustomShareImage()mpCustomShareImage.set({canvasId: 'shareCanvas',price: `¥4.60/盒`,linePrice: `¥4.73/盒`,goodsSpecFirmName: `0.25g*50粒 重庆科瑞制药(集团)有限公司`,image:'https://public-scjuchuang.oss-cn-chengdu.aliyuncs.com/mini_program/mp_default_sc.png',}).then((img) => {// 分享图console.log(img)})// -left-[1000px] -top-[1000px] 要放在页面上,且不显示
<canvascanvasId="shareCanvas"class="w-[500px] h-[400px] absolute -left-[1000px] -top-[1000px]"
/>
http://www.xdnf.cn/news/1306009.html

相关文章:

  • 访问者模式C++
  • Android RxJava 过滤与条件操作详解
  • 数据结构初阶(17)排序算法——非比较排序、排序算法总结
  • Flink的状态管理
  • SpringCloud学习
  • 【完整源码+数据集+部署教程】孔洞检测系统源码和数据集:改进yolo11-RetBlock
  • 自适应UI设计解读 | Fathom 企业人工智能平台
  • ​​金仓数据库KingbaseES V9R1C10安装教程 - Windows版详细指南​
  • 力扣习题:基本计算器
  • 从 “碳足迹“ 到 “零碳圈“:上海零碳园区的改造密码
  • Xget:为您的开发工作流解锁极致速度
  • 用 1 张 4090 复现 GPT-3.5?——单卡 24 GB 的「渐进式重计算」训练实践
  • 第三十五天(JSAjax技术)
  • 苹果(apple)ios系统和安卓(Android) apk系统开发者账号类型及申请步骤
  • Linux之高可用集群实战(二)
  • 利用Minicsv库解析csv文件的c程序及读入测试
  • expand.exe命令为什么能显示CD.iso的版本信息?
  • 中国象棋人机对战
  • Linux Namespace隔离实战:dd/mkfs/mount/unshare构建终极沙箱
  • Spring Boot 静态函数无法自动注入 Bean?深入解析与解决方案
  • MySQL 主键详解:作用与使用方法
  • 嵌入式:Linux软件编程:线程
  • 【详细操作指南】如何将 Moodle 与编辑器连接,以修改文档、检查和批改作业等
  • 2025年最新油管视频下载,附MassTube下载软件地址
  • 【Canvas与玻璃光】铝圈蓝底玻璃光按钮
  • 华为实验综合小练习
  • YAML:锚点深度解析,告别重复,拥抱优雅的配置艺术
  • 第二十四天:虚函数与纯虚函数
  • 【科研绘图系列】R语言绘制三维曲线图
  • MySQL多表查询案例