一键抠图后图片边缘锯齿化
============

#### 问题现象

一键抠图后，得到的图像边缘锯齿化较为明显。

#### 背景知识

1.  [图片编辑和处理](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-editing-arkts)指对PixelMap进行相关的操作，如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。
2.  开发者通过调用[Image Kit](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/image-overview)（图片处理服务）提供的接口，可以实现图片的解码、编码、编辑、元数据处理和图片接收等功能。
3.  [Canvas](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-components-canvas-canvas)提供画布组件，用于自定义绘制图形。具体用法请参考[CanvasRenderingContext2D](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasrenderingcontext2d)对象。

#### 问题定位

1.  使用DevEco Testing-实用工具-UIViewer查看布局实现，确认图像绘制基于Canvas组件实现。
2.  排查代码，检查Canvas组件绘制图像时是否进行抗锯齿处理和羽化处理。
    *   绘制图像时直接使用[drawImage](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasrenderingcontext2d#drawimage)接口，易产生锯齿。
        
        _// 问题代码：直接缩放绘制_
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{
            this.context.drawImage( this.img,0,0,400,200); _// 直接缩放导致锯齿_
          })
        
    *   未设置[imageSmoothingEnabled](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasrenderingcontext2d#imagesmoothingenabled)接口为false开启图像平滑处理。
        
        _// 问题代码：缺少抗锯齿设置_
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor('#ffff00')
          .onReady(() =>{ _// 未开启图像平滑处理_
            this.context.imageSmoothingEnabled = false; _// 默认值为true，需手动开启_
          })
        

#### 分析结论

Canvas组件绘制图像时未进行抗锯齿处理，导致一键抠图后图片边缘锯齿化严重。

#### 修改建议

建议使用Canvas组件内置抗锯齿设置进行抗锯齿处理，具体[代码示例](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-canvas-canvasrenderingcontext2d#imagesmoothingenabled)可参考官方文档。