uni.chooseImage 图片变形

### 关于 `uni.chooseImage` 图片变形问题 在开发过程中，如果遇到通过 `uni.chooseImage` 方法获取的图片出现变形的情况，通常是因为图片宽高比例未被正确处理或者压缩操作改变了原始尺寸所致。以下是可能的原因以及对应的解决方案： #### 可能原因分析 1. **返回参数设置不当** 如果在调用 `uni.chooseImage` 时设置了不合适的选项（如 `sizeType` 或者 `sourceType`），可能会导致图片加载后的显示效果异常[^1]。 2. **图片压缩影响质量** 当选择大图并启用压缩功能 (`compressed`) 后，某些设备上的实现可能导致分辨率降低或比例失真。 3. **样式布局冲突** 即使选择了正确的图片，在前端展示阶段如果没有适配好容器宽度高度的比例关系，则也可能造成视觉上看起来像是发生了形变的现象。 #### 解决方案详解 ##### 方案一：调整 API 参数配置 确保传入给 `uni.chooseImage` 的参数能够满足需求的同时保留原图特性： ```javascript uni.chooseImage({ count: 9, // 默认最多选九张 sizeType: ['original', 'compressed'], // original 原图 compressed 压缩图，默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图 camera 使用相机拍摄 success(res) { const tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); } }); ``` 注意这里可以单独指定只接收未经修改过的图像文件(`['original']`)来减少潜在风险。 ##### 方案二：动态计算宽高等属性 当上传成功之后再渲染到页面之前，可以通过读取临时路径下的实际数据重新定义其 CSS 属性从而避免拉伸情况的发生。 ```javascript function getImageInfo(filePath){ return new Promise((resolve,reject)=>{ wx.getImageInfo({//假设当前环境支持微信小程序API兼容写法 src:filePath, success(info){ resolve(info); }, fail(err){ reject(err); } }); }) } async function handleSelectedImages(paths){ let infos=[]; try{ for(let path of paths){ const info=await getImageInfo(path); infos.push(info); } renderWithProperSize(infos); // 自定义函数用于按照真实大小绘制DOM结构 }catch(error){ console.error('Error processing images:',error.message); } } ``` ##### 方案三：利用 Canvas 调整画布尺寸 对于更复杂的场景下还可以借助 HTML5 提供的强大工具——Canvas 来手动裁剪和重绘目标区域内的像素点阵列达到理想的效果。 ```html <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); ctx.drawImage(image,x,y,width,height,dstX,dstY,dstWidth,dstHeight); </script> ``` 以上方法均有助于改善由 `uni.chooseImage` 引发的各种形式的变化现象，并最终呈现出符合预期的结果。