更新记录

1.0.0(2024-08-09) 下载此版本

1.0.0


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

uni-app中的Canvas图像处理组件

描述

该组件旨在通过在画布上绘制多张图片和文字来创建自定义图像。它支持图像的圆角生成,并且可以将最终的复合图像保存到用户的设备相册中。

组件结构

模板

模板部分包含一个单一的<canvas>元素,将作为绘图区域使用。

脚本

属性

  • list: 包含如backImagemyImagefooterImagenametitle等属性的对象。这些用于图片源和文本内容。

数据

  • savedImagePath: 生成图像的临时文件路径。
  • screen_height: 设备屏幕的高度。
  • screen_width: 设备屏幕的宽度,已针对不同分辨率进行了标准化。

方法

  • canvasImage(key): 主要方法,初始化在画布上的图像处理和绘制。
  • drawRoundedImage(ctx, image, x, y, width, height, cornerRadius): 在画布上绘制带有圆角的图像。
  • getImageData(urls): 异步下载多张图片并返回它们的信息。
  • savePic(): 将最终图像保存至用户的相册,在此之前会检查权限。

样式

样式部分包括用于canvas元素的CSS规则。

使用

为了使用这个组件,你需要向它传递一个list属性,其中包含所有必要的图片URL和文本值。然后,调用canvasImage方法将触发创建过程。

注意

确保你的应用程序有访问相册(scope.writePhotosAlbum)的权限,然后再尝试保存图片。这一点在savePic方法中已经处理。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问