uniapp 使用cavans 生成海报

uniapp 使用cavans 生成海报

npm install qs-canvas

1.创建 useCanvas.js

/*** Shopro + qs-canvas 绘制海报* @version 1.0.0* @author lidongtony* @param {Object} options - 海报参数* @param {Object} vm - 自定义组件实例*/
import QSCanvas from 'qs-canvas';
import { getPosterData } from './poster';export default async function useCanvas(options, vm) {const width = options.width;const qsc = new QSCanvas({canvasId: options.canvasId,width: options.width,height: options.height,setCanvasWH: (canvas) => {options.height = canvas.height;},},vm,);let drawer = getPosterData(options);// 绘制背景图const background = await qsc.drawImg({type: 'image',val: drawer.background,x: 0,y: 0,width,mode: 'widthFix',zIndex: 0,});await qsc.updateCanvasWH({width: background.width,height: background.bottom,});let list = drawer.list;for (let i = 0; i < list.length; i++) {let item = list[i];// 绘制文字if (item.type === 'text') {await qsc.drawText(item);}// 绘制图片if (item.type === 'image') {if (item.d) {qsc.setCircle({x: item.x,y: item.y,d: item.d,clip: true,});}if (item.r) {qsc.setRect({x: item.x,y: item.y,height: item.height,width: item.width,r: item.r,clip: true,});}await qsc.drawImg(item);qsc.restore();}// 绘制二维码if (item.type === 'qrcode') {await qsc.drawQrCode(item);}}await qsc.draw();// 延迟执行, 防止不稳定setTimeout(async () => {options.src = await qsc.toImage();}, 100);return options;
}

index.vue

<template><canvasclass="hideCanvas":canvas-id="poster.canvasId":id="poster.canvasId":style="{height: poster.height + 'px',width: poster.width + 'px',}"/></template><script setup>import useCanvas from './useCanvas';const props = defineProps({shareInfo: {type: Object,default() {},},});const Sys = uni.getSystemInfoSync();const poster = reactive({canvasId: 'canvasId',width: Sys.device.windowWidth * 0.9,height: 600,src: '',});async function getPoster() {poster.src = '';poster.shareInfo = props.shareInfo;// #ifdef APP-PLUSposter.canvasId = 'canvasId-' + new Date().getTime();// #endifconst canvas = await useCanvas(poster, vm);return canvas;}
</script>

poster/index.js

import user from './user';
export function getPosterData(options) {switch (options.shareInfo.poster.type) {case 'user':return user(options);}
}export function formatImageUrlProtocol(url) {// #ifdef H5// H5平台 https协议下需要转换if (window.location.protocol === 'https:' && url.indexOf('http:') === 0) {url = url.replace('http:', 'https:');}// #endif// #ifdef MP-WEIXIN// 小程序平台 需要强制转换为https协议if (url.indexOf('http:') === 0) {url = url.replace('http:', 'https:');}// #endifreturn url;
}

需要不同的海报 就创建不同 js 文件 存放你需要画的那些元素
poster/user.js

import { formatImageUrlProtocol } from './index';const user = (poster) => {const width = poster.width;//你需要拼接的参数const userInfo = {};return {background: formatImageUrlProtocol('httpxxxxxxxx'),list: [{name: 'nickname',type: 'text',val: userInfo.nickname,x: width / 2,y: width * 0.4,paintbrushProps: {textAlign: 'center',fillStyle: '#333',font: {fontSize: 14,fontFamily: 'sans-serif',},},},{name: 'avatar',type: 'image',val: formatImageUrlProtocol('httpxxxxxx'),x: width * 0.4,y: width * 0.16,width: width * 0.2,height: width * 0.2,d: width * 0.2,},// #ifndef MP-WEIXIN{name: 'qrcode',type: 'qrcode',val: poster.shareInfo.link,x: width * 0.35,y: width * 0.84,size: width * 0.3,},// #endif// #ifdef MP-WEIXIN{name: 'wxacode',type: 'image',val: 'httpxxxxxxxxxxx',x: width * 0.35,y: width * 0.84,width: width * 0.3,height: width * 0.3,},// #endif],};
};export default user;

在这里插入图片描述

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

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

相关文章

NVIDIA Visual Profiler启动失败报错

在银河麒麟V10安装完NVIDIA后&#xff0c;想着试着运行一下NVIDIA Visual Profiler&#xff0c;发现报错&#xff0c;如下图。 照着提示翻阅日志文件。看见其中写着 !ENTRY com.nvidia.viper.birt 2 0 2024-06-30 08:39:39.806 !MESSAGE Could not resolve module: com.nvidi…

ACE之Task框架

简介 其提供了并发处理事件的能力 结构 #mermaid-svg-8gxc0Agd7gZ9tHdf {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-8gxc0Agd7gZ9tHdf .error-icon{fill:#552222;}#mermaid-svg-8gxc0Agd7gZ9tHdf .error-text{…

R学习资源及R包安装

转自生信师兄 生信必备技巧之R语言基础教程 1. 学习资源 推荐书籍&#xff1a;R语言实战&#xff0c;R数据科学等等&#xff1b; 这两本书在公众号【生信师兄】都有pdf版&#xff0c;有需要的可以关注公众号【生信师兄】并回复&#xff1a;“R语言”&#xff0c;即可获得免费…

【自然语言处理】预训练语言模型实现与应用

预训练语言模型实现与应用 1 任务目标 1.1 案例简介 ​ 2018年&#xff0c;Google提出了预训练语言模型BERT&#xff0c;该模型在各种NLP任务上都取得了很好的效果。与此同时&#xff0c;它的使用十分方便&#xff0c;可以快速地对于各种NLP任务进行适配。因此&#xff0c;B…

《每天5分钟用Flask搭建一个管理系统》第8章:权限管理

第8章&#xff1a;权限管理 8.1 权限管理的概念 权限管理是控制用户对应用内不同资源访问的机制。它确保用户只能访问他们被授权的资源。 8.2 Flask-Principal扩展的使用 Flask-Principal是一个提供权限管理功能的Flask扩展&#xff0c;它允许您定义角色和权限&#xff0c;…

基于HarmonyOS NEXT开发智能提醒助手

目录 目录 目录 前言 关于HarmonyOS NEXT 智能提醒助手需求分析 智能提醒助手设计 1、系统架构 2、功能模块 智能提醒助手的应用场景 智能提醒助手的竞争力 具体技术实现 未来展望 结束语 前言 随着智能设备的普及和物联网技术的飞速发展&#xff0c;人们对于智能…

基于大津阈值法和二值化与联通区域标记进行图像目标计数

1 建模 A.读取图像&#xff1a; 1.使用imread函数读取图像文件。 2.如果图像是彩色的&#xff0c;通常需要先转换为灰度图像&#xff0c;因为大津阈值法通常应用于灰度图像。 B.灰度化&#xff1a; 1&#xff0e;如果图像是彩色的&#xff0c;使用rgb2gray函数将其转换为灰度…

《昇思25天学习打卡营第16天 | 昇思MindSpore基于MobileNetv2的垃圾分类》

16天 本节学习了垃圾分类代码开发的方法。通过读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并且将检测结果图片保存到文件中。 MobileNet网络是由Google团队于2017年提出的专注于移动端、嵌入式或IoT设备的轻量级CNN网络&#xff0c;相比于传…

Excel显示/隐藏批注按钮为什么是灰色?

在excel中&#xff0c;经常使用批注来加强数据信息的提示&#xff0c;有时候会把很多的批注显示出来&#xff0c;但是再想将它们隐藏起来&#xff0c;全选工作表后&#xff0c;“显示/隐藏批注”按钮是灰色的&#xff0c;不可用。 二、可操作方法 批注在excel、WPS表格中都是按…

【考研408计算机组成原理】微程序设计重要考点指令流水线考研真题+考点分析

苏泽 “弃工从研”的路上很孤独&#xff0c;于是我记下了些许笔记相伴&#xff0c;希望能够帮助到大家 目录 微指令的形成方式 微指令的地址形成方式 对应考题 题目&#xff1a;微指令的地址形成方式 - 断定方式 解题思路&#xff1a; 答题&#xff1a; 分析考点&…

每日疑问,多线程场景,下面的代码是否可以保证只执行一次

看着这个代码的目的是只注册一次sighandler&#xff0c;但是这个判定是否可以保证一次&#xff1f;但是根据代码看&#xff0c;其实不会有关键区的读写&#xff0c;所以即使有同步问题&#xff0c;也不会产生什么特别的影响。所以代码没有问题&#xff0c;但是这是一个坑。 in…

Spring Boot中的分页与排序实现

Spring Boot中的分页与排序实现 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在开发Web应用时&#xff0c;分页和排序是常见的功能需求&#xff0c;特别是在处…

计算机体系结构和指令系统

1.计算机体系结构 - 五大部件 - 冯 诺依曼 计算机的特点 1.计算机有五大部件组成 2.指令和数据以同等地位存储于存储器&#xff0c;可按照地址访问 3.指令和数据用二进制表示 4.指令由操作码和地址码组成 5。存储程序 6.以计算器为中心&#xff08;输入、输出设备与存储器…

2024年【湖北省安全员-C证】新版试题及湖北省安全员-C证试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 湖北省安全员-C证新版试题参考答案及湖北省安全员-C证考试试题解析是安全生产模拟考试一点通题库老师及湖北省安全员-C证操作证已考过的学员汇总&#xff0c;相对有效帮助湖北省安全员-C证试题及解析学员顺利通过考试…

WIN10系统自带录屏软件怎么用?

WIN10系统自带录屏软件怎么用&#xff1f; WIN10系统录屏软件怎么用&#xff1f; 第一步&#xff1a;WING 快捷打开系统自带录屏软件&#xff0c;如下&#xff1a; 第二步&#xff1a;点击录屏软件区域“开始录制”按钮进入屏幕录制状态&#xff0c;如下&#xff1a; 第三步…

基于SpringBoot的财务管理系统

根据您提供的论文内容和模板要求&#xff0c;以下是定制化的文章输出&#xff1a; 你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a; Java 数据库&#xff1a; MySQL 技术&#xff1a; SpringBoot…

某度,网盘免费加速,复活!

哈喽&#xff0c;各位小伙伴们好&#xff0c;我是给大家带来各类黑科技与前沿资讯的小武。 有小伙伴反馈之前如下夸克网盘脚本的加速方法失效&#xff0c;小武今天测试&#xff0c;依旧正常使用&#xff01; 百度/迅雷/夸克&#xff0c;网盘免费加速&#xff0c;已破&#xf…

pytest测试框架pytest-cov插件生成代码覆盖率

Pytest提供了丰富的插件来扩展其功能&#xff0c;本章介绍下pytest-cov插件&#xff0c;用于生成测试覆盖率报告&#xff0c;帮助开发者了解哪些部分的代码被测试覆盖&#xff0c;哪些部分还需要进一步的测试。 pytest-cov 支持多种报告格式&#xff0c;包括纯文本、HTML、XML …

node中使用mysql

在nodeJs中mysq的基础用法 mysql基础 增删改查 const mysql require(mysql)const connection mysql.createConnection({host: localhost, // 数据库的IP地址port: 3306, // 端口号user: root, // 登录数据库的账号password: 123456, // 登录数据库的密码database: test, // 指…

JavaScript高级程序设计(第四版)--学习记录之迭代器与生成器(下)

生成器 生成器是 ECMAScript 6 新增的一个极为灵活的结构&#xff0c;拥有在一个函数块内暂停和恢复代码执行的能力。 生成器基础 生成器的形式是一个函数&#xff0c;函数名称前面加一个星号表示它是一个生成器。 //生成器函数声明 function* generatorFn(){} //生成器函数表…