更新记录

1.0.3（2024-08-03） 下载此版本

适配微信小程序

1.0.2（2024-07-29） 下载此版本

修改问题

1.0.1（2024-07-29） 下载此版本

修改问题

平台兼容性

uni-app

uni-app x

jack-filepicker简介

jack-filepicker是一款适用于H5端和微信小程序的图片编辑器，本组件支持选择图片后进行直接编辑的操作，进行添加时间、位置、旋转、裁剪和涂鸦，具体效果看下方的gif。

开发文档

1.首先导入本组件到项目。

2.在main.js中引入并安装。

import JackFileupload from "@/uni_modules/jack-filepicker/components/jack-fileupload/jack-fileupload.vue"
//全局注册组件
Vue.component("JackFileupload", JackFileupload)

3.在页面中使用组件。

<jack-fileupload  />

4.h5中，在manifest.json源码视图的 h5 中配置[高德应用申请的key-web服务API](创建应用和 Key-Web服务 API | 高德地图API (amap.com))，否则无法使用定位功能，同时在源码视图中将manifest.json中的注释删除。

5.微信小程序中，在manifest.json 源码视图的 mp-weixin中添加如下配置，同时在源码视图中将manifest.json中的注释删除：

"mp-weixin": {
        "appid": "",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true,
        //新加配置如下
        "requiredPrivateInfos": ["getLocation"],
        "permission": {
            "scope.userLocation": {
                "desc": "你的位置信息将用于位置信息展示"
            }
        }
        //新加配置结束
    },

5.在项目根目录进行下node_modules依赖的安装

npm i @amap/amap-jsapi-loader --save

注意：

1.h5调试添加位置功能时，请在dege中调试(推荐);或者使用https协议的域名代理到本地址进行访问;也可以发布到服务器使用https域名访问');

2.微信小程序调试裁剪功能时，请在真机调试下进行。

配置说明

事件

//@delete 返回参数
{
    index,//删除的图片索引
    url//删除的图片链接
}

示例

<template>
    <view class="content">
        <jack-fileupload
            v-model="list" 
            :limit="3" 
            :readonly="false"
            :disablePreview="false"
            :delIcon="true"
            :showTitle="true"
            title="请选择图片"
            :sourceType="['album', 'camera']"
            :fileExtname="['.png']"
            @finishEdit="saveSucc" 
            @delete="deleteItem" 
            />
        <button @click="upload">123</button>
        <uni-file-picker ref="uploadRef" return-type="array" v-model="list" limit="5" @select="select" mode="grid"
            @success="success" @delete="deleteI" file-mediatype="image" title="最多选择5个文件"></uni-file-picker>
    </view>
</template>

<script>
    import {
        handleOper
    } from "@/custom-tab-bar/utils/index.js"
    export default {
        data() {
            return {
                list: [],
                title: 'Hello',
                read: false,
            }
        },
        onLoad() {

        },
        methods: {
            upload() {},
            saveSucc(e) {
                uni.uploadFile({
                    url: 'http://localhost:84/upload',
                    filePath: e,
                    name: 'file',
                    formData: {
                        fileName: 'file.png'
                    },
                    success: res => {
                        this.list.push(JSON.parse(res.data).url)
                    }
                })
            },
            deleteItem(e) {
                console.log(e);
            },
            success(e) {
                console.log(e);
                console.log(this.list);
            },
            select(e) {
                console.log(e);
                this.$refs.uploadRef.upload()
                console.log(this.list);
            },
            deleteI(index) {
                console.log(index);
            }
        },
        onShow() {
            handleOper.call(this)
        },
        watch:{
            list(){
                console.log(this.list.length);
            }
        }
    }
</script>

<style>

</style>

小结

微信小程序端由于原生canvas组件层级问题，图片过长在真机会出现覆盖工具栏的问题，暂时未解决，请各位大佬指点迷津。