【HarmonyOS NEXT】CanvasRenderingContext2D内容如何导出为一个图片文件

【关键字】

画布组件CanvasRenderingContext2D / drawImage / image.createPixelMap / @ohos.file.fs (文件管理)

【问题描述】

使用CanvasRenderingContext2D的drawImage方法画的二维码和logo图片，如何使用fs模块导出成一个图片文件到沙箱中？

实验使用CanvasRenderingContext2D的getImageData方法配合fs的write方法生成的文件无法打开。

【解决方案】

当前使用CanvasRenderingContext2D的drawImage方法画二维码和logo图片时，createPixelMap入参的buffer必须是BGRA格式的，需要转换一下。后续版本会增加所有类型buffer可用。

请参考如下代码保存文件：

async writePic(imgData: ImageData) {
let times = new Date().getTime();
let path = this.filesDir + '/' + times + '.jpg'
try {
let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
let uint8Array = new Uint8Array(imgData.data.buffer as ArrayBuffer);
this.convertRGBAtoBGRA(uint8Array, imgData.width, imgData.height)
let pixmap: PixelMap = await image.createPixelMap(uint8Array.buffer as ArrayBuffer, {
size: { height: imgData.height, width: imgData.width }
})

let packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 };
const imagePackerApi: image.ImagePacker = image.createImagePacker();
imagePackerApi.packToFile(pixmap, file.fd, packOpts, (err: BusinessError) => {
if (err) {
console.error('packToFile failed.');
} else {
console.info('packToFile succeeded.');
}
})
} catch (err) {
let er = err as BusinessError
console.error(`writePic failed, code is ${er.code}, message is ${er.message}`);
}
;
}

convertRGBAtoBGRA(data: Uint8Array, width: number, height: number) {
for (let i = 0; i < width * height * 4; i += 4) {
let temp = data[i];
data[i] = data[i + 2];
data[i + 2] = temp;
}
}

drawimage方法定义参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-canvasrenderingcontext2d-0000001815767860#ZH-CN_TOPIC_0000001815767860__drawimage