当前位置：首页 > news >正文

微信小程序uniapp开发附源码——长图拼接

news 2025/11/13 5:59:01

开发三十个纯前端微信小程序工具之长图拼接（30/5）

一个开箱即用的长图拼接工具小程序

长图拼接页面截图
在这里插入图片描述

长图拼接采用canvas实现

支持垂直方向、水平方向图片拼接，支持设置图片间距
项目是使用uniapp开发的，下面直接贴一下核心代码：

长图拼接

<!-- 隐藏的canvas -->
<canvas type="2d" id="stitchCanvas" class="hidden-canvas"></canvas>

drawStitchedImage(images) {console.log('images', images);let canvasWidth, canvasHeight;if (this.direction === 'vertical') {// 纵向拼接：使用固定宽度400，高度自适应，避免垂直方向图片过大const fixedWidth = 400;const scaledHeights = images.map(img => img.height * (fixedWidth / img.width));canvasWidth = fixedWidth;canvasHeight = scaledHeights.reduce((sum, h) => sum + h, 0) + (images.length - 1) * this.spacing;} else {// 横向拼接：高度固定400，宽度自适应const fixedHeight = 400;const scaledWidths = images.map(img => img.width * (fixedHeight / img.height));canvasWidth = scaledWidths.reduce((sum, w) => sum + w, 0) + (images.length - 1) * this.spacing;canvasHeight = fixedHeight;}// 限制最大尺寸，避免内存问题const maxSize = 4000;if (canvasWidth > maxSize || canvasHeight > maxSize) {const scale = Math.min(maxSize / canvasWidth, maxSize / canvasHeight);canvasWidth = Math.floor(canvasWidth * scale);canvasHeight = Math.floor(canvasHeight * scale);}const query = uni.createSelectorQuery().in(this);query.select('#stitchCanvas').fields({ node: true, size: true }).exec((res) => {if (res[0]) {const canvas = res[0].node;const ctx = canvas.getContext('2d');const dpr = uni.getSystemInfoSync().pixelRatio;canvas.width = canvasWidth * dpr;canvas.height = canvasHeight * dpr;ctx.scale(dpr, dpr);ctx.fillStyle = '#ffffff';ctx.fillRect(0, 0, canvasWidth, canvasHeight);let currentX = 0, currentY = 0;// 按顺序依次加载并绘制图片，确保顺序一致const drawSequentially = async () => {for (let i = 0; i < images.length; i++) {const img = images[i];await new Promise((resolve, reject) => {const imageObj = canvas.createImage();imageObj.onload = () => {let drawWidth, drawHeight, x, y;if (this.direction === 'vertical') {drawWidth = canvasWidth;drawHeight = img.height * (canvasWidth / img.width);x = 0;y = currentY;ctx.drawImage(imageObj, x, y, drawWidth, drawHeight);currentY += drawHeight + this.spacing;} else {drawHeight = canvasHeight;drawWidth = img.width * (canvasHeight / img.height);x = currentX;y = 0;ctx.drawImage(imageObj, x, y, drawWidth, drawHeight);currentX += drawWidth + this.spacing;}resolve();};imageObj.onerror = (err) => {console.error('图片加载失败:', err);uni.hideLoading();uni.showToast({title: `第${i + 1}张图片加载失败`,icon: 'none'});reject(err);};imageObj.src = img.path;});}// 全部绘制完成后导出setTimeout(() => {uni.canvasToTempFilePath({canvas: canvas,quality: 0.8,fileType: 'jpg',success: (res) => {this.resultPath = res.tempFilePath;uni.hideLoading();uni.showToast({title: '拼接完成',icon: 'success'});},fail: (err) => {console.error('canvas导出失败:', err);uni.hideLoading();uni.showToast({title: '拼接失败',icon: 'none'});}}, this);}, 100);};drawSequentially();} else {uni.hideLoading();uni.showToast({title: 'Canvas初始化失败',icon: 'none'});}});},