quickly-mask项目中的图片处理核心技术解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00147/article/details/148625090

quickly-mask项目中的图片处理核心技术解析

hi-face 项目地址: https://gitcode.com/gh_mirrors/hif/hi-face

前言

在quickly-mask项目中，图片处理是实现核心功能的关键环节。本文将深入剖析项目中涉及的图片选择、裁剪、压缩、模糊处理以及分享等核心技术点，帮助开发者更好地理解和应用这些技术。

图片选择技术

在项目中，图片选择是第一个关键步骤。我们使用chooseImageAPI来实现这一功能：

Taro.chooseImage({
  count: 1, // 仅允许选择一张图片
  sourceType: ['album', 'camera'], // 支持相册和相机两种来源
  sizeType: ['original', 'compressed'] // 可选择原图或压缩图
}).then(res => {
  this.setState({
    originSrc: res.tempFilePaths[0] // 保存图片路径
  });
}).catch(error => {
  console.error('图片选择失败:', error);
})

技术要点解析：

在Android设备上，压缩效果可能不理想，建议优先选择原图
后续可通过Canvas进行更精确的压缩控制
错误处理必不可少，需考虑用户拒绝授权等情况

图片裁剪实现

quickly-mask项目采用了taro-cropper插件来实现高质量的图片裁剪功能：

<View className='cropper-wrap' hidden={!originSrc}>
  <TaroCropper
    src={originSrc}
    cropperWidth={900}
    cropperHeight={900} // 强制正方形裁剪
    ref={this.catTaroCropper}
    fullScreen
    fullScreenCss
    onCut={this.onCut}
    hideCancelText={false}
    onCancel={this.onCancel}
  />
</View>

技术细节：

固定宽高比为1:1，确保裁剪结果为正方形
全屏模式提供更好的用户体验
提供取消按钮，增强用户控制感

图片压缩优化

项目中采用了两种压缩方案：

API压缩方案：

Taro.compressImage({
  src: tempFilePaths,
  quality: 10 // 质量参数，范围1-100
})

Canvas压缩方案：

更精确控制压缩质量
可自定义输出尺寸
适合对压缩效果要求高的场景

压缩策略建议：

头像类图片：建议质量20-40
普通展示图片：建议质量50-70
高质量需求：建议质量80以上

图片模糊处理技巧

项目中巧妙地解决了Canvas在高分辨率设备上的模糊问题：

<Canvas 
  className='canvas-mask' 
  style={{ width: '900px', height: '900px' }} 
  canvasId='canvasMask' 
/>

关键CSS：

.canvas-mask {
  position: absolute;
  left: 0;
  top: -9999px; /* 移出可视区域 */
}

技术原理：

创建大尺寸Canvas保证图像质量
通过CSS将Canvas移出可视区域
导出高质量图片供实际显示使用

图片分享功能实现

quickly-mask项目实现了完整的图片分享流程：

// 图片预览
previewPoster = () => {
  const { posterSrc } = this.state
  if (posterSrc) Taro.previewImage({ urls: [posterSrc] })
}

// 分享配置
onShareAppMessage({ from, target }) {
  return {
    title: '自定义分享标题',
    imageUrl: shareImage,
    path: shareUrl
  }
}

UI实现：

<Image
  src={posterSrc}
  onClick={this.previewPoster}
  showMenuByLongpress // 启用长按菜单
/>
<Button 
  openType='share'
  data-poster-src={posterSrc}
>
  发送给朋友
</Button>

分享功能要点：