更新记录

2.2（2023-05-11）

修改使用demo示例

2.1（2021-11-29）

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

2.0（2021-11-25）

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

平台兼容性

使用方法

<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);

属性

组件属性：

调用接口参数：

返回值：

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

兼容性说明

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

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