更新记录

2.2(2023-05-11) 下载此版本

修改使用demo示例

2.1(2021-11-29) 下载此版本

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

2.0(2021-11-25) 下载此版本

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

查看更多

平台兼容性

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

使用方法

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

        <button @click="exportLongImg">生成长图</button>
        <view class="img-list" v-for="(item,index) in show_imgs" :key="index">
            <image mode="aspectFill" :src="item.path" :style="{height: (item.ratio * 750) + 'rpx'}"></image>
            <view>-------- next ----------</view>
        </view>

    </view>
</template>

<script>
    import longImage from "@/components/long-image/long-image.vue";
    export default {
        components:{
            longImage,
        },
        data() {
            return {
                show_imgs: []
            }
        },
        methods: {
            exportLongImg: async function(){
                this.show_imgs.splice(0, this.show_imgs.length);
                var [err, res] = await uni.chooseMedia({mediaType: ['image'], sourceType: ['album']});
                if(err && err.errMsg){
                    console.error('error:', err);
                    if(err.errMsg.indexOf('cancel') >= 0)return;
                    uni.showToast({
                        title: '错误,检测控制台',
                        icon:"error"
                    });
                    return;
                }
                if(!res || !res.tempFiles)return;
                console.log('select imgs:', res, err);
                for(let item of res.tempFiles){
                    item.path = item.tempFilePath;
                }
                if(!res.tempFiles.length)return;
                await uni.showLoading({title:'正在拼接'});
                let merge_list = await this.$refs.longImg.join({
                    items: res.tempFiles, 
                    path_key: 'path'
                });
                console.log('result', merge_list);
                if(!merge_list || merge_list.length == 0){
                    uni.showToast({
                        title:'拼接错误',
                        icon:'none'
                    });
                    await uni.hideLoading();
                    return;
                }
                // 逐个保存长图
                for(let path of merge_list){
                    let [error, imgInfo] = await uni.getImageInfo({src: path});
                    let curAspect = imgInfo.height / imgInfo.width;
                    this.show_imgs.push({path, ratio: curAspect});
                }
                await uni.hideLoading();
            }
        }
    }
</script>

<style>
.img-list{
    width: 100%;
    background: red;
    padding-bottom: 10rpx;
}
.img-list image{
    width: 750rpx;
    left: 0;
}
</style>

调用接口

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

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

返回的拼接后图片是一个列表,这是因为小程序画布的高宽有最大限制,而且传入图片张数不确定,如果传入图片太多,超过了画布的高度,一个图片肯定是放不下的,必须要用多个图片来存放。比如传入10个高1600 * 宽1200的图片,输出宽度outWidth要求864,则输出高度对应为1152,十张总输出高度为11520像素,而微信小程序画布最大4096,则必须用11520/4096=3张图片存放拼接后的图片。

所以实际上是outWidth和maxNum以及传入图片的高宽比,这三者共同决定了输出图片的张数。

不同手机不同系统的限制可能不同,如果遇到输出白屏等问题,请尝试调整outWidth、maxHeight等参数(评论中说把canvas高度删除,实际相当于调整了maxHeight参数大小)。

因工作调整,不再接受qq联系,有问题请评论留言,不定期查看解决。

// 注意:当传入图片数量超过设置的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协议

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