概览
图片修复功能支持指定图片中需要修复的区域,并对其中的主体进行识别,通过 AI 算法智能填充与周围区域相似的图片纹理,从而快速、准确地修复图片中的瑕疵,提高工作效率、降低成本。本文将介绍如何使用 腾讯云数据万象(CI)的 图像修复 能力,快速涂抹修复图片瑕疵。
业务场景
摄影后期制作时,修复图片瑕疵及背景杂物,帮助摄影师节省时间和精力。
修复老照片中的划痕、污渍等瑕疵。
电商平台中的商品图片修复,提升商品图片的质量和美观度,吸引更多的消费者。
前提条件
创建数据万象存储桶,详情请参见 存储桶操作。
上传待处理的图片 到存储桶中。
步骤一:初始化 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;
原图效果示例:
![avatar](https://qcloudimg.tencent-cloud.cn/image/document/5ae791d0d1d954cff6f95babbc5109e7.jpeg)
![avatar](https://qcloudimg.tencent-cloud.cn/image/document/5ae791d0d1d954cff6f95babbc5109e7.jpeg)
步骤二:制作包含涂抹修复区域的遮罩图
下面以鼠标标记涂抹区域为例,介绍制作遮罩图的方法。
// 使用鼠标标记涂抹区域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;}});}
遮罩图示例(白色为涂抹区域):
![avatar](https://qcloudimg.tencent-cloud.cn/image/document/6fca12700dbee70cd43aacbca0cb4999.jpeg)
![avatar](https://qcloudimg.tencent-cloud.cn/image/document/6fca12700dbee70cd43aacbca0cb4999.jpeg)
注意:
遮罩图需与原图相同尺寸,背景为黑色,需要涂抹的区域为白色。
步骤三:修复图片并展示
获取原始图片地址,格式为:
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
图片修复后效果如下:
![avatar](https://qcloudimg.tencent-cloud.cn/image/document/770e9b907fa4494a55872d35c0fef631.jpeg)
![avatar](https://qcloudimg.tencent-cloud.cn/image/document/770e9b907fa4494a55872d35c0fef631.jpeg)
Demo 体验
具体代码可参见 cos-demo 图片瑕疵涂抹修复。