uniapp小程序上传裁剪

### UniApp 小程序中实现图片上传与裁剪功能 在 UniApp 开发的小程序中，为了防止因图片尺寸不匹配而导致的头像压缩拉伸问题，可以采用自定义裁剪逻辑来处理用户上传的图片。以下是具体方法： #### 使用 Canvas 进行图片裁剪 Canvas 是一种强大的绘图工具，在小程序环境中可以通过它完成图片的裁剪操作。通过调用 `uni.chooseImage` 获取本地图片资源，并将其绘制到 Canvas 上进行裁剪。 ```javascript // 页面初始化数据 data() { return { tempFilePath: '', // 存储临时路径 cropWidth: 200, // 裁剪宽度 (单位 px) cropHeight: 200 // 裁剪高度 (单位 px) }; }, methods: { chooseImage() { uni.chooseImage({ count: 1, success: res => { this.tempFilePath = res.tempFilePaths[0]; this.drawToCanvas(); } }); }, drawToCanvas() { const ctx = uni.createCanvasContext('myCanvas'); const imgSrc = this.tempFilePath; // 设置画布大小 ctx.drawImage(imgSrc, 0, 0, this.cropWidth, this.cropHeight); ctx.draw(false, () => { setTimeout(() => { this.saveCropedImage(); // 延迟保存裁剪后的图像 }, 200); // 需要等待一段时间确保 canvas 绘制完毕 }); }, saveCropedImage() { uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: res => { console.log('裁剪成功', res.tempFilePath); // 可在此处执行上传或其他操作 }, fail: err => { console.error('裁剪失败', err); } }); } } ``` 上述代码实现了从相册选取一张图片并利用 Canvas 对其进行裁剪的功能[^1]。 #### 自定义样式调整 为了让用户体验更佳，可以在页面上设计一个区域用于展示待裁剪的图片以及最终效果预览区。以下是一个简单的布局示例： ```html <view class="picselect"> <canvas style="width:{{cropWidth}}px;height:{{cropHeight}}px;" canvas-id="myCanvas"></canvas> </view> <view class="usernameyang">用户名：<text>张三</text></view> <view class="user-img"><image src="{{tempFilePath}}" mode="aspectFill"></image></view> ``` 配合 CSS 定义样式如下所示： ```css .picselect { position: relative; margin: 0 auto; text-align: center; } .user-img { width: 80rpx; height: 80rpx; border-radius: 8rpx; float: right; margin-top: 17rpx; } .user-img image { width: 100%; height: 100%; } ``` 以上代码片段展示了如何设置界面中的图片选择器和裁剪框位置[^2]。 #### 文件上传至服务器 当完成裁剪之后，可将生成的新图片上传至远程服务器存储起来供后续使用。通常会借助于 HTTP 请求库发送 POST 数据包携带二进制文件流给后端接口处理。 ```javascript uploadFile(filePath) { uni.uploadFile({ url: 'https://example.com/upload', // 替换为目标地址 filePath: filePath, name: 'file', formData: {}, success(res) { console.log('上传成功:', JSON.parse(res.data)); }, fail(err) { console.error('上传失败:', err); } }); } ``` 此部分负责把经过前端加工好的素材提交上去以便长期保留或者分享等功能扩展。 --- ###