Uniapp 图片编辑插件 Ba-ImageEditor

三杯五岳

已于 2022-10-05 13:20:34 修改

阅读量4.5k

点赞数

分类专栏： uni-app 文章标签： uni-app 前端插件图片编辑

于 2022-08-16 12:33:59 首次发布

本文链接：https://blog.csdn.net/u013164293/article/details/126362963

版权

uni-app 专栏收录该内容

65 篇文章 27 订阅

订阅专栏

简介（下载地址）

Ba-ImageEditor 是一款功能强大、操作简单的uniapp图片编辑插件，支持涂鸦、贴图、滤镜、裁剪、旋转、添加文字、美颜等等。

支持涂鸦编辑（包含画笔颜色、粗细、橡皮擦、清空、缩放等）
支持贴图（支持自定义配置，分类）
支持滤镜效果（包含软化、黑白、经典、华丽、复古、优雅、电影、回忆、优格、流年、发光、马赛克等等）
支持裁剪图片（包含多种尺寸比例）
支持旋转图片（360°丝滑旋转）
支持添加文字（包含文字颜色、文字大小、方向旋转、拖动位置等）
支持美颜效果（包含磨皮、美白）

可与uniapp自带的 uni.chooseImage 搭配使用（注：参考下面的使用方法，路径需要转下）。

也可与原生插件图片选择插件 Ba-MediaPicker 搭配使用。（文档）

插件本身也自带选择图片方法 selectImage （参考使用方法）。

截图展示

在这里插入图片描述

使用方法

在 script 中引入组件

	const imageEditor = uni.requireNativePlugin('Ba-ImageEditor')

在 script 中调用

		methods: {
			imageEdit() {//编辑图片
				imageEditor.imageEdit({
						'isShowSticker': false, //是否展示贴图功能，默认为true
						'path': this.path,//原始图片路径
						'outputPath': this.outputPath,//保存图片路径
					},
					(ret) => {
						console.log(ret)
						if (ret.outputPath && ret.isImageEdit) {
							this.path = ret.outputPath;
						}
					});
			},
			selectPicUni() {//选择图片：搭配uniapp 的 uni.chooseImage使用
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						//注：uni.chooseImage返回的地址为：“file://+路径”格式，需要转一下，如下
						that.path = res.tempFilePaths[0].replace("file://", "");
					}
				});
			},
			selectImage() {//选择图片，本插件自带
				imageEditor.selectImage(
					(ret) => {
						console.log(ret)
						if (ret.outputPath) {
							this.path = ret.outputPath;
						}
					});
			},
		}

贴图资源配置

添加贴图资源：默认带部分贴图资源，可根据需要添加资源，在项目的 “nativeplugins\Ba-ImageEditor\android\assets\baie_stickers” 目录下分类添加资源（没有就新建）。注意：更改nativeplugins后需要重新制作基座才能生效，建议提前配置。
配置资源分类：在“nativeplugins\Ba-ImageEditor\android\assets\baie_stickers” 目录下，新建 paths.json 文件，内容参考如下

参数：

属性名	类型	说明
iconPath	String	分类图标路径
resPath	String	该分类资源目录，该贴图分类的图片资源都放在此目录下
name	String	该分类的名称

示例：

[
  {
    "iconPath": "baie_stickers/animal.png",
    "resPath": "baie_stickers/animal",
    "name": "动物"
  },
  {
    "iconPath": "baie_stickers/cos.png",
    "resPath": "baie_stickers/cos",
    "name": "装饰"
  },
  {
    "iconPath": "baie_stickers/text.png",
    "resPath": "baie_stickers/text",
    "name": "文字"
  }
]

编辑图片 imageEdit 方法参数

属性名	类型	默认值	说明
path	String	‘’	原始图片路径，不能为空
outputPath	String	/storage/emulated/0/Pictures/BaImageEditor/tietu{时间毫秒}.png	保存图片路径
isShowSticker	Boolean	true	是否展示贴图功能