【小程序】Canvas 画布分享海报

成品效果图

  • 可以通过切换下面图片形成不同的海报背景分享图
    在这里插入图片描述
<template><view>// type="2d"必须加<canvas type="2d" :style="{width:Artwidth+ 'px',height:Artheight + 'px', margin:'0 auto'}" canvas-id="firstCanvas"id="firstCanvas"> </canvas><view class="bootmbtn"><view class="save" @click="save">保存海报</view><scroll-view scroll-x="true" style="white-space: nowrap;width:100vw"><view class="botmbar" :class="current==1?'new':''" @click="getimg('/static/canvas/1.jpg',1)"><image src="/static/canvas/1.jpg" mode=""></image></view><view class="botmbar" :class="current==2?'new':''" @click="getimg('/static/canvas/2.jpg',2)"><image src="/static/canvas/2.jpg" mode=""></image></view><view class="botmbar" :class="current==3?'new':''" @click="getimg('/static/canvas/3.jpg',3)"><image src="/static/canvas/3.jpg" mode=""></image></view><view class="botmbar" :class="current==4?'new':''" @click="getimg('/static/canvas/4.jpg',4)"><image src="/static/canvas/4.jpg" mode=""></image></view></scroll-view></view></view>
</template><script>//接口获取二维码import {getCode,} from "@/common/api.js"export default {data() {return {dpr: 1,Artwidth: 0,Artheight: 0,w: 375,h: 500,shareimg: "",current: 1,ctx: "",};},onLoad() {this.openapply()},methods: {//立即推广openapply() {getCode().then(res => {if (res.code == 1) {this.shareimg = res.datathis.getimg("/static/canvas/1.jpg", 1)}})},getimg(IMG, index) {let that = thisthat.current = indexconst query = uni.createSelectorQuery().in(this)query.select("#firstCanvas").fields({node: true,size: true}).exec(res => {const {node: canvas} = res[0];console.log(canvas, 888)//绘制const ctx = canvas.getContext('2d');that.ctx = canvas//这一步为了画布转图片that.dpr = uni.getWindowInfo().pixelRatio || 1;canvas.width = that.w * that.dprcanvas.height = that.h * that.dprctx.clearRect(0, 0, canvas.width, canvas.height)that.Artwidth = that.wthat.Artheight = that.hctx.fillStyle= "#ffffff"ctx.fillRect(0, 0,canvas.width, canvas.height);console.log(canvas.width, canvas.height, 400 * that.dpr)//获取图片实例,去绘制const bgimage = canvas.createImage()bgimage.onload = () => {ctx.drawImage(bgimage, 0, 0, canvas.width, 400 * that.dpr)that.getcode(canvas, ctx)}bgimage.src = IMG})},// 绘制二维码getcode(canvas, ctx) {let that = thisconst bgimage = canvas.createImage()bgimage.onload = () => {ctx.drawImage(bgimage, (that.w - 105) * that.dpr, (that.h - 90) * that.dpr, 88 * that.dpr, 88 *that.dpr)that.getlogo(canvas, ctx)}bgimage.src = that.shareimg},//绘制 logogetlogo(canvas, ctx) {let that = thisconst bgimage = canvas.createImage()bgimage.onload = () => {ctx.drawImage(bgimage, 24 * that.dpr, (that.h - 90) * that.dpr, 88 * that.dpr, 88 * that.dpr)that.getfont(canvas, ctx)}bgimage.src = '/static/2.png'},// 绘制文字getfont(canvas, ctx) {let that = thisctx.fillStyle= "#000000"ctx.font = '42px "微软雅黑"';ctx.fillText('小程序', 130 * that.dpr, (that.h - 45) * that.dpr)ctx.fillStyle = "red";ctx.scale(that.dpr, that.dpr);},//保存save() {let that = thissetTimeout(() => {uni.canvasToTempFilePath({canvas: that.ctx, // 使用2D 需要传递的参数success: function(res) {// 在H5平台下,tempFilePath 为 base64console.log(res.tempFilePath)uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function(res2) {uni.showToast({title: "保存成功,请从相册选择再分享",icon: "none",duration: 5000,});},fail: function(err) {uni.hideLoading();// console.log(err.errMsg);},});},fail(err) {console.log(err)}})}, 1000)}}}
</script><style lang="scss">.bootmbtn {position: fixed;bottom: 0;left: 0;height: 380rpx;padding: 24rpx 0 32rpx 32rpx;border-top: 4rpx #d8d3cf solid;}.botmbar {margin-top: 12rpx;display: inline-block;width: 310rpx;height: 310rpx;margin-right: 24rpx;text-align: center;line-height: 320rpx;image {width: 300rpx;height: 300rpx;}}.new {border: 3px solid #000000;box-sizing: border-box;}.save {// position: fixed;// bottom: 240rpx;// right: 24rpx;margin: 0 auto;width: 248rpx;height: 80rpx;line-height: 80rpx;border-radius: 80rpx;opacity: 1;background: #a91e25;opacity: 1;color: #ffffff;font-size: 30rpx;font-weight: 600;font-family: "PingFang SC";text-align: center;}
</style>

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

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

相关文章

小兔鲜项目 uniapp (1)

目录 项目架构 uni-app小兔鲜儿电商项目架构 小兔鲜儿电商课程安排 创建uni-app项目 1.通过HBuilderX创建 2.通过命令行创建 pages.json和tabBar案例 uni-app和原生小程序开发区别 用VS Code开发uni-app项目 拉取小兔鲜儿项目模板代码 基础架构–引入uni-ui组件库 操…

STM32CubeMX之freeRTOS互斥量

这是大哥保护小弟的故事 高中低等级的任务 互斥量就是谁要敢插我小弟的队&#xff0c;我就要打他&#xff0c;不能让其他人插我小弟的队 互斥量的使用是默认开启的不用手动开启&#xff01; 最高优先级任务&#xff1a;延时&#xff08;10ms&#xff09;再上厕所 中间&#x…

java静默打印PDF(可实现生产环境下服务器写入PDF模板,然后调用客户端打印机打印)

java静默打印PDF可实现生产环境下服务器写入PDF模板&#xff0c;然后调用客户端打印机打印 一、简需求实现步骤 二、代码实现0、打印模板1、服务器部分 &#xff08;端口&#xff1a;8090&#xff09;1.1、maven依赖1.2、实体1.2.1、接口返回类1.2.2、标签纸页面参数类1.2.3、P…

OpenCV实例(八)车牌字符识别技术(一)模式识别

车牌字符识别技术&#xff08;一&#xff09;模式识别 1.模式识别流程2. 模式识别方式 影响并导致汽车牌照内字符出现缺损、污染、模糊等情况的常见因素有照相机的性能、采集车辆图像时光照的差异、汽车牌照的清洁度等。为了提高汽车牌照字符识别的准确率&#xff0c;本节将把英…

2.0 Maven基础

1. Maven概述 Maven概念 Apache Maven是一个软件项目管理工具&#xff0c;将项目开发和管理过程抽象程一个项目对象模型&#xff08;POM&#xff0c;Project Object Model&#xff09;。 Maven作用 项目构建 提供标准的、跨平台的自动化项目构建方式。 依赖管理 方便快捷…

深入探索 Spring MVC:构建优雅的Web应用

文章目录 前言一、什么是 Spring MVC1.1 什么是 MVC1.2 什么是 Spring MVC 二、Spring MVC 项目的创建2.1 项目的创建2.2 第一个 Spring MVC 程序 —— Hello World 三、RequestMapping 注解3.1 常用属性3.2 方法级别和类级别注解3.3 GetMapping、PostMapping、PutMapping、Del…

C# Blazor 学习笔记(12):css样式设置

文章目录 前言添加引入css保证razor和css的对应关系手动引入css文件 前言 由于Blazor UI库暂时还不完善&#xff0c;有时候需要我们自己写css。Razor做好了css动态隔离的设置。 ASP.NET Core Blazor CSS 隔离 C#小轮子&#xff1a;Visual Studio自动编译Sass文件 添加引入c…

eclipse Java Code_Style Code_Templates

Preferences - Java - Code Style - Code Templates Eclipse [Java_Code_Style_Code_Templates_ZengWenFeng] 2023.08.07.xml 创建一个新的工程&#xff0c;不然有时候不生效&#xff0c;旧项目可能要重新导入eclipse 创建一个测试类试一试 所有的设置都生效了

实践分享:小程序事件系统设计

微信小程序官方文档中解释说&#xff1a;事件是用于子组件向父组件传递数据&#xff0c;可以传递任意数据。 小程序开发中的事件是指视图层到逻辑层的通讯方式&#xff0c;主要是可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上&#xff0c;当达到触发事件&#…

2023年七夕情人节是什么时候? 淘宝天猫七夕节礼物优惠券怎么领取?

2023年七夕情人节是什么时候&#xff1f; 2023年七夕节时间是2023年8月22日&#xff08;农历七月初七&#xff0c;星期二&#xff09;&#xff1b; 七夕情人节&#xff0c;又称中国情人节&#xff0c;是浪漫的代名词。源自古人对牛郎织女一年一度相会的仰望&#xff0c;这一天…

嵌入式Linux下LVGL的移植与配置

一.sdk源码下载路径 1.官方源码下载路径如下: ​​​​​​ https://github.com/lvgl/lvgl git下载方式 git clone https://github.com/lvgl/lvgl.git 2.个人移植好的源码8.2版本下载路径: 链接&#xff1a;https://pan.baidu.com/s/1jyqIennsQpv-RB4RyKvZyg?pwdc68e 提取…

android 如何分析应用的内存(十八)终章——使用Perfetto查看内存与调用栈之间的泄露

android 如何分析应用的内存&#xff08;十八&#xff09; 在前面两篇文章中&#xff0c;先是介绍了如何用AS查看Android的堆内存&#xff0c;然后介绍了使用MAT查看 Android的堆内存。AS能够满足基本的内存分析需求&#xff0c;但是无法进行多个堆的综合比较&#xff0c;因此…

[保研/考研机试] KY163 素数判定 哈尔滨工业大学复试上机题 C++实现

题目链接&#xff1a; 素数判定https://www.nowcoder.com/share/jump/437195121691718831561 描述 给定一个数n&#xff0c;要求判断其是否为素数&#xff08;0,1&#xff0c;负数都是非素数&#xff09;。 输入描述&#xff1a; 测试数据有多组&#xff0c;每组输入一个数…

excel将主信息和明细信息整理为多对多(每隔几行空白如何填充)

excel导出的数据是主信息和明细信息形式。 方法如下:1、首先&#xff0c;从第一个单元格开始选中要填充的数据区域。2、按CtrlG或者F5调出定位对话框&#xff0c;点击左下角的【定位条件】。3、在【定位条件】中选择【空值】&#xff0c;然后点击【确定】按钮。4、按照上述操作…

Vue3+Ts+Vite项目全局配置Element-Plus主题色

概述 我找了很多博客&#xff0c;想全局配置Elmenet-Plus组件主题色&#xff0c;但都没有效果。所以有了这篇博客&#xff0c;希望能对你有所帮助&#xff01;&#xff01;&#xff01; 文章目录 概述一、先看效果二、创建全局颜色文件2.1 /src/styles 下新建 element-plus.sc…

Snapclear for mac图像背景删除软件

Snapclear使用先进的算法和人工智能技术&#xff0c;能够快速而准确地分离图像中的主题和背景。它可以自动识别边缘和细节&#xff0c;并生成平滑而清晰的抠图结果。 Snapclear Mac版下载-Snapclear for mac(图像背景删除软件)- Mac下载 功能 人工智能驱动。 精确的切片 100%…

skywalking忽略调用链路中的指定异常

文章目录 一、介绍二、演示项目介绍1. 支付服务2. 订单服务 三、项目演示1. 未忽略异常2. 忽略异常修改配置使用注解 四、结论 往期内容 一、skywalking安装教程 二、skywalking全链路追踪 三、skywalking日志收集 一、介绍 在前面介绍在微服务项目中使用skywalking进行全链…

小白到运维工程师自学之路 第七十一集 (kubernetes网络设置)

一、概述 Master 节点NotReady 的原因就是因为没有使用任何的网络插件&#xff0c;此时Node 和Master的连接还不正常。目前最流行的Kubernetes 网络插件有Flannel、Calico、Canal、Weave 这里选择使用flannel。 二、安装flannel 1、master下载kube-flannel.yml&#xff0c;所…

ABAP: SQL 多值查询

基础查数据 问题举例&#xff1a;例如查物料类型为ZFRT、ZROH和ZRSA的物料编码。 1、直接查询&#xff0c;三种不同类型的物料类型是或的关系。 SELECT DISTINCT ma~matnr ma~mtartFROM mara AS maINNER JOIN mbewh AS mbON ma~matnr mb~matnrINTO CORRESPONDING FIELDS OF…

Lombok的使用及注解含义

文章目录 一、简介二、如何使用2.1、在IDEA中安装Lombok插件2.2、添加maven依赖 三、常用注解3.1、Getter / Setter3.2、ToString3.3、NoArgsConstructor / AllArgsConstructor3.4、EqualsAndHashCode3.5、Data3.6、Value3.7、Accessors3.7.1、Accessors(chain true)3.7.2、Ac…