微信小程序海报插件Painter 2.0(canvas画图)使用并保存图片到相册案例

一、下载与引入

Painter通过 json 数据形式,来进行动态渲染并绘制出图片。
Painter 的优势

  • 功能全,支持文本、图片、矩形、qrcode 类型的 view 绘制
  • 布局全,支持多种布局方式,如 align(对齐方式)、rotate(旋转)
  • 支持圆角,其中图片,矩形,和整个画布支持 borderRadius 来设置圆角
  • 支持边框,同时支持 solid、dashed、dotted 三种类型
  • 支持渐变色,包括线性渐变与径向渐变。
  • 支持 box-shadow 和 text-shadow,统一使用 shadow 表示。
  • 支持文字背景、获取宽度、主动换行
  • 支持自定义字体
  • 支持图片 mode
  • 支持元素的相对定位方法
  • 杠杠的性能优化,我们对网络素材图片加载实现了一套 LRU 存储机制,不用重复下载素材图片。
  • 杠杠的容错,因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制,如果绘图出错会进行重绘。
  • 生成的图片支持分辨率调节
  • 支持使用拖动等操作动态编辑绘制内容

文件源码和文档地址:https://gitee.com/jackhunx/Painter

下载文件保存到components文件夹下

//在需要使用的页面json中引入
"usingComponents": {"painter":"/components/painter/painter"
}

二、使用

wxml

<!-- 海报弹框 -->
<van-popup show="{{isPosterShow}}" bind:close="closePosterFn" custom-style="background: none;"><view class="poster"><image bind:tap="saveImageFn" src="{{posterImageUrl}}" mode=""/><text>点击图片,保存至手机相册</text></view>
</van-popup><painter palette="{{posterData}}" bind:imgOK="onImageOK" />

js

var app = getApp();
Page({/*** 页面的初始数据*/data: {isPosterShow: false,//海报弹框qrCodeUrl: "",//二维码图片路径posterData: {},//海报数据posterImageUrl: "",//海报图片},//绘制海报drawPosterFn(){wx.showLoading({title: '生成中',})this.setData({posterData: {background: '背景颜色或背景图片地址',width: '1164rpx',height: '1548rpx',views: [{type: "text",text: "文字内容",css: {top: "256rpx",left: "82rpx",width: "1000rpx",fontSize: "72rpx",color: "#0159BB",maxLines: 2,lineHeight: "108rpx",textAlign: "center",fontWeight: "bold"}},{type: 'image',url: "二维码图片地址",css: {top: '680rpx',left: '264rpx',width: '640rpx',height: '640rpx',},}],}})},//监听海报是否生成成功onImageOK(e){wx.hideLoading();this.setData({isPosterShow: true,posterImageUrl: e.detail.path})},//保存图片到本地saveImageFn(){let that = thiswx.saveImageToPhotosAlbum({filePath: this.data.posterImageUrl,success(res) {wx.hideLoading()wx.showToast({title: '保存成功',icon: "success",duration: 1000})},fail(err) {console.log(err)if(err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){wx.showModal({content: '检测到您没有授权保存到相册权限,是否去设置打开?',confirmText: "确认",cancelText: "取消",success: function(res) {//点击“确认”时打开设置页面if (res.confirm) {wx.openSetting({success () {that.savePhoto();}})} else {}}});}else if(err.errMsg == "saveImageToPhotosAlbum:fail privacy permission is not authorized"){app.showMsg("没有同意用户隐私协议!");}else if(err.errMsg == "saveImageToPhotosAlbum:fail privacy permission is not authorized in gap"){app.showMsg("保存失败!");}else{app.showMsg(err.errMsg);}}})},//下载图片地址并保存到相册,提示保存成功savePhoto() {wx.saveImageToPhotosAlbum({filePath: this.data.posterImageUrl,success(res) {wx.hideLoading()wx.showToast({title: '保存成功',icon: "success",duration: 1000})},fail() {wx.showToast({title: '保存失败',icon: "error",duration: 1000})}})},//关闭海报弹框closePosterFn(){this.setData({isPosterShow: false})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {this.drawPosterFn()},
})

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

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

相关文章

一个简单的Web程序(详解创建一个Flask项目后自带的一个简单的Web程序)

程序代码截图如下&#xff1a; 1.应用初始化 在创建 Flask 程序时&#xff0c;通常需要先创建一个应用实例进行应用初始化。 from flask import Flask # 应用的初始化 app Flask(__name__) 上述代码中&#xff0c;使用 Flask 类创建了一个应用实例 app。 __name__ 参数用…

理解 Stable Diffusion、模型检查点(ckpt)和变分自编码器(VAE)

前言 在探索深度学习和人工智能领域的旅途中&#xff0c;理解Stable Diffusion、模型检查点(ckpt)以及变分自编码器(VAE)之间的关系至关重要。这些组件共同构成了当下一些最先进图像生成系统的基础。本文将为初学者提供一个详细的概述&#xff0c;帮助您理解这些概念以及它们是…

mp4文件可以转成mp3音频吗

现在是个非常流行刷短视频一个年代&#xff0c;刷短视似乎成了人们休闲娱乐的一种方式&#xff0c;在日常刷短视频过程中&#xff0c;肯定会有很多同学被短视频 bgm 神曲洗脑&#xff0c;比如很多被网红翻唱带火的歌曲&#xff0c;例如其中"不负人间”&#xff0c;就是其中…

Python 散点图的绘制(Seaborn篇-03)

Python 散点图的绘制(Seaborn篇-03)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹…

【温故而知新】HTML5拖放/地理定位/浏览器支持

文章目录 一、概念二、拖放三、地理定位&#xff08;Geolocation&#xff09;四、浏览器支持 一、概念 HTML5是HTML的最新版本&#xff0c;它引入了许多新的元素和功能&#xff0c;以适应现代网页开发的需求。以下是HTML5的一些主要特点&#xff1a; 新增语义元素&#xff1a…

go获取文件md5值不正确的问题记录

一次偶然的操作&#xff0c;发现了一些端倪&#xff0c;获取md5时如下是常规操作&#xff1a; md5hash : md5.New()file, _ : os.Open(filename)defer file.Close()_, err : io.Copy(md5hash, file) // file 为*os.File类型&#xff0c;即读取文件后的文件对象if err ! nil {r…

2024年1月19日Arxiv最热NLP大模型论文:Self-Rewarding Language Models

超越人类反馈限制&#xff0c;Meta自我奖励语言模型刷新AlpacaEval 2.0排行榜 引言&#xff1a;超越人类的AI代理——自我奖励语言模型的探索 在人工智能的发展历程中&#xff0c;我们一直在探索如何打造出能够超越人类智慧的AI代理。这些代理不仅需要能够理解和执行人类的指…

BuildRoot配置RTL8822CE WIFIBT模块(BT部分)

BuildRoot配置RTL8822CE WIFI&BT模块&#xff08;WIFI部分&#xff09;-CSDN博客 WIFI部分更新一下&#xff1a; ①、rkwifibt.mk 查看了output/rockchip_rk3399_tinkerboard2/build/的两个目录都有wifi相关的ko(后面make clean之后剩下linux-headers-custom路径的)&…

使用函数计算,数禾如何实现高效的数据处理?

作者&#xff1a;邱鑫鑫&#xff0c;王彬&#xff0c;牟柏旭 公司背景和业务 数禾科技以大数据和技术为驱动&#xff0c;为金融机构提供高效的智能零售金融解决方案&#xff0c;服务银行、信托、消费金融公司、保险、小贷公司等持牌金融机构&#xff0c;业务涵盖消费信贷、小…

菜鸟关于做前、后端的整理(html、js),以及疑问

涉及到后端的接口py&#xff0c;前端html和js 这三部分就按照如下格式放到server项目主路径下&#xff0c;这样后端机可以作为一个前端server main.pystaticmain.jsmain.htmlhtml 首先是html要设定网页的显示 <!DOCTYPE html> <html> <head><title>…

电力能源实景三维可视化合集,智慧电网数字孪生

电力能源是现代社会发展和运行的基石&#xff0c;渗透于工业、商业、农业、家庭生活等方方面面&#xff0c;它为经济、生活质量、环境保护和社会发展提供了巨大的机会和潜力。图扑软件应用自研 HT for Web 强大的渲染引擎&#xff0c;助力现代化的电力能源数字孪生场景&#xf…

【Vue】vue项目中Uncaught runtime errors:怎样关闭

vue项目中Uncaught runtime errors:怎样关闭 一、背景描述二、报错原因三、解决方案3.1 只显示错误信息不全屏覆盖3.2 取消全屏覆盖 四、参考资料 一、背景描述 项目本来运行的好好&#xff0c;换了个新的浏览器&#xff0c;新的Chrome浏览器版本号是116.0.5845.97&#xff08…

视频增强修复Topaz Video AI

Topaz Video AI是一款强大的视频增强软件&#xff0c;利用人工智能技术对数千个视频进行训练&#xff0c;结合多个输入视频的帧信息来提高素材的分辨率。该软件可将视频的分辨率提高到最高8K&#xff0c;并保持真实的细节和运动一致性。同时&#xff0c;它还能自动修复视频中的…

HCIA-HarmonyOS设备开发认证-序

序 最近涉及到HarmonyOS鸿蒙系统设备开发&#xff0c;在网络上已经有很多相关资料&#xff0c;视频教程&#xff0c;我也移植了公司的一个stm32G474板卡&#xff0c;运行LiteOS-m L0系统。 一面看资料一面移植&#xff0c;遇到不少坑&#xff0c;当看到运行的LOGO时&#xff0…

【ARMv8M Cortex-M33 系列 7.4 -- 如何使能 usagefault | memmange fault | bus fault 中断】

请阅读【嵌入式开发学习必备专栏 之 ARM Cortex-Mx专栏】 文章目录 背景异常使能配置 背景 由于文章【ARMv8M Cortex-M33 系列 7.2 – HardFault 问题定位 1】 中提到了HardFault 的发生是由于其它异常所升级导致的&#xff0c;所以就需要调查下如何是能其它异常中断。 异常使…

vue同时触发两个函数

1:同时触发两个函数 在 Vue 中&#xff0c;你可以在一个点击事件中同时触发多个方法。方法调用使用分号来分隔。 click"changeColor(); changeBgc()" 这样&#xff0c;当你点击这个元素时&#xff0c;changeColor()和 changeBgc() 两个方法都会被依次执行。 2&…

protobuf学习日记 | 认识protobuf中的类型

目录 前言 一、标量数据类型 二、protobuf中的 “数组” 三、特殊类型 1、枚举类型 &#xff08;1&#xff09;类型讲解 &#xff08;2&#xff09;升级通讯录 2、Any类型 &#xff08;1&#xff09;类型讲解 &#xff08;2&#xff09;升级通讯录 3、oneof类型 …

LeetCode、2300. 咒语和药水的成功对数【中等,排序+二分】

文章目录 前言LeetCode、2300. 咒语和药水的成功对数【中等&#xff0c;排序二分】题目及类型思路及代码 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域…

elementUI+el-upload 上传、下载、删除文件以及文件展示列表自定义为表格展示

Upload 上传组件的使用 官方文档链接使用el-upload组件上传文件 具体参数说明&#xff0c;如何实现上传、下载、删除等功能获取文件列表进行file-list格式匹配代码 文件展示列表自定义为表格展示 使用的具体参数说明文件大小展示问题&#xff08;KB/MB&#xff09;文件下载代码…

【GitHub项目推荐--微软开源的可视化工具】【转载】

说到数据可视化&#xff0c;大家都很熟悉了&#xff0c;设计师、数据分析师、数据科学家等&#xff0c;都需要用各种方式各种途径做着数据可视化的工作.....当然许多程序员在工作中有时也需要用到一些数据可视化工具&#xff0c;如果工具用得好&#xff0c;就可以把原本枯燥凌乱…