一、业务场景
·摄影后期制作时，修复图片瑕疵及背景杂物，帮助摄影师节省时间和精力。
·修复老照片中的划痕、污渍等瑕疵。
·电商平台中的商品图片修复，提升商品图片的质量和美观度，吸引更多的消费者。
二、前提条件
·创建数据万象存储桶，详情请参见 存储桶操作。
·上传待处理的图片 到存储桶中。
三、步骤一：初始化 Canvas 画布
根据原图大小来初始化 Canvas 画布，原图为存储在存储桶中的图片：
// 原图存储在Bucket中，原图地址为：const imgSrc = `https://${config.Bucket}.cos.${config.Region}.myqcloud.com/${config.FileName}`;const img = new Image();img.crossOrigin = 'anonymous'; // 跨域设置，必须img.onload = () => { // 获取图片尺寸初始化画布 const context = canvas.getContext('2d'); originWidth = img.width; originHeight = img.height; canvas.width = originWidth; canvas.height = originHeight; context.clearRect(0, 0, originWidth, originHeight);};img.src = imgSrc;
注意：说明：
原图效果示例：
四、步骤二：制作包含涂抹修复区域的遮罩图
下面以鼠标标记涂抹区域为例，介绍制作遮罩图的方法。
// 使用鼠标标记涂抹区域function setCanvasDraw(context) { const context = canvas.getContext('2d'); let isDrawing = false; let y = 0; // 画线条标记涂抹区域 const drawLine = (context, x0, y0, x1, y1) => { context.beginPath(); context.strokeStyle = 'white'; // 涂抹区域为白色 context.lineWidth = 30; context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineJoin = 'round'; context.lineCap = 'round'; context.stroke(); }; // 鼠标按下：开始涂抹 canvas.addEventListener('mousedown', event => { x = event.layerX; y = event.layerY; isDrawing = true; }); // 鼠标移动：持续涂抹 canvas.addEventListener('mousemove', event => { if (isDrawing) { drawLine(context, x, y, event.layerX, event.layerY); x = event.layerX; y = event.layerY; } }); // 鼠标抬起：结束涂抹 canvas.addEventListener('mouseup', event => { if (isDrawing) { drawLine(context, x, y, event.layerX, event.layerY); x = 0; y = 0; isDrawing = false; } });}
遮罩图示例（白色为涂抹区域）：
注意：遮罩图需与原图相同尺寸，背景为黑色，需要涂抹的区域为白色。
最后将 Canvas 遮罩图上传到存储桶中，详情请参见 上传图片。
五、步骤三：修复图片并展示
获取原始图片地址，格式为：
https://${config.Bucket}.cos.${config.Region}.myqcloud.com/source.jpg
获取遮罩图地址，格式为：
https://${config.Bucket}.cos.${config.Region}.myqcloud.com/mask.jpg
获取修复后的图片，有三种方法：
·下载时处理，适用于直接下载并展示修复后图片的场景。使用方法可参见 图像修复 API，在图片地址后拼接 ci-process=ImageRepair 、访问签名q-sign-algorithm=<signature> 和 MaskPic=遮罩图地址 URL 安全的 Base64 编码，即：
https://${config.Bucket}.cos.${config.Region}.myqcloud.com/source.jpg?q-sign-algorithm=<signature>&ci-process=ImageRepair&MaskPic=aHR0cDovL2V4xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
·上传时处理，适用于将修复图持久化存储的场景。使用方法可参见 上传时处理，在上传原图的时候在请求头中加入处理参数，即：
PUT /source.jpg HTTP/1.1Host: ${config.Bucket}.cos.${config.Region}.myqcloud.comDate: Wed, 28 Oct 2022 20:32:00 GMTAuthorization:XXXXXXXXXXXXPic-Operations: {"is_pic_info":1,"rules":[{"fileid":"result.jpg","rule":"ci-process=ImageRepair&MaskPic=aHR0cDovL2V4xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}]}Content-Length: XXX[Image Object]
·云上数据处理，适用于原图已存储在存储桶中，并且需要将修复后的图片存入到存储桶中的场景。使用方法可参见 云上数据处理：
POST /source.jpg?image_process HTTP/1.1Host: ${config.Bucket}.cos.${config.Region}.myqcloud.comDate: Wed, 28 Oct 2022 20:32:00 GMTAuthorization: XXXXXXXXXXPic-Operations: {"is_pic_info":1,"rules":[{"fileid":"result.jpg","rule":"ci-process=ImageRepair&MaskPic=aHR0cDovL2V4xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}]}Content-Length: XXX
图片修复后效果如下：
注意：说明：
六、Demo 体验
·具体代码可参见 cos-demo 图片瑕疵涂抹修复。
·你可使用腾讯云对象存储控制台，在 智能工具箱 栏目中使用示例图片或自行上传图片，体验图片修复的实际效果。