更新记录

2.1(2021-11-29)

解决第二次输出长图文字错位bug;解决其他若干bug

2.0(2021-11-25)

兼容不支持canvas 2d的情况,使用普通canvas 支持百度小程序、支付宝小程序等平台

查看更多

平台兼容性

Vue2 Vue3
×
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
3.1.22 app-vue 7.0.4 可能支持 支持 可能支持 可能支持 可能支持
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

使用方法

<template>
    <view>
        <long-image ref="longImg" style="position: absolute;top: -3000rpx;left: -3000rpx;" 
            markText="来自: 微信小程序" :maxNum="9" :maxHeight="4096" :width="750" :outWidth="864" markPos="right-bottom"></long-image>

        <button @click="exportLongImg">生成长图</button>

    </view>
</template>

<script>
    import longImage from "@/components/long-image/long-image.vue";
    export default {
        components:{
            longImage,
        },
        data() {
            return {
                items: [
                    {path: 'https://static-aliyun-doc.oss-accelerate.aliyuncs.com/assets/img/zh-CN/7289459951/p139183.png'},
                    {path: 'http://static-aliyun-doc.oss-cn-hangzhou.aliyuncs.com/assets/img/zh-CN/9042359951/p2524.jpg'},
                ]
            }
        },
        methods: {
            exportLongImg: async function(){
                await uni.showLoading({title:'正在拼接'});
                let merge_list = await this.$refs.longImg.join({
                    items: this.items, 
                    path_key: 'path'
                });
                if(!merge_list || merge_list.length == 0){
                    uni.showToast({
                        title:'拼接错误',
                        icon:'none'
                    });
                    await uni.hideLoading();
                    return;
                }
                // 逐个保存长图
                for(let path of merge_list){
                    await uni.saveImageToPhotosAlbum({filePath: path});
                }
                await uni.hideLoading();

            }
        }
    }
</script>

调用接口

如果不需要显示,可设置绝对定位,left和top为负值,移出屏幕窗口。

如果需要显示,无需设置绝对定位。

// 注意:当传入图片数量超过设置的maxNum(默认6)时(或累计高度超过maxHeight),会分割为多个长图返回
let merge_imgs = await this.$refs.longImg.join({items: imgs, path_key: 'path'})
console.log(merge_imgs);

属性

组件属性:

属性名 类型 默认值 描述
width Number 750 组件占用的屏幕显示宽度,单位:rpx。
outWidth Number 864 输出长图的宽度,单位:px。过大时可能导致卡顿或无响应。最大不超过4096;
maxNum Number 6 单个长图的最大拼接图片数量
maxHeight Number 0 拼接后最大高度,单位:px。0表示不限;微信小程序画布不可超过4096px
markText String null 水印文本
markPos String right-bottom 水印位置,可选值:right-bottom, right-top, left-bottom, left-top
markSize Number 20 水印文字大小,单位:px
markColor String #d9cc37 水印发光效果颜色

调用接口参数:

参数名 类型 默认值 描述
{items} List - 图片对象列表
{path_key} String - 图片对象中,图片地址的属性名

返回值:

拼接后的本地图片地址列表,类型:List[String]

兼容性说明

微信小程序和百度小程序测试通过,其他端未经测试,但应该是可以支持的。

百度小程序输出长图第一次可能图片错误,第二次一般输出正确,应该是百度小程序画布的bug。

隐私、权限声明

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

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

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

许可协议

MIT协议

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