更新记录

1.0.0（2024-08-09） 下载此版本

1.0.0

平台兼容性

uni-app

uni-app x

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

描述

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

组件结构

模板

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

脚本

属性

• list: 包含如backImage、myImage、footerImage、name和title等属性的对象。这些用于图片源和文本内容。

数据

• 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方法中已经处理。