HarmonyOS 鸿蒙Next怎么在图片上添加二维码
HarmonyOS 鸿蒙Next怎么在图片上添加二维码 做分享,想在分享的图片上添加二维码。
做法: 在Canvas的context上drwaImage 先后把本地图片和二维码画上去。
-
然后
context.getImageData
拿到图片数据。但是这个imageData
转成Uint8Array
之后 添加到分享图片里面不生效。 -
换一种尝试,把
imageData
用buffer的方式存到沙盒路径。然后用uri的方式分享图片 出现的是一个占位图(也就是图片还是不生效)。
哪位大佬帮我解答一下是思路就错了吗?
附上我的代码:
export class Share {
private static instance:Share
private static imageData:ImageData
constructor() {
}
static getInstance(){
if (!Share.instance) {
Share.instance = new Share()
}
return Share.instance
}
shareImage(){
this.writeFile()
Log.debug('begin share')
let resultData = new Uint8Array(Share.imageData.data.buffer)
let that = new util.types()
let result = that.isUint8Array(resultData)
Log.debug('看看是不是uint8Arr:'+result)
const context = getContext(this) as common.UIAbilityContext
//换成下面这个resultData就可以正常拉起分享
// resultData = context.resourceManager.getMediaContentSync($r('app.media.sharetest')) as Uint8Array
const contextFaker: Context = getContext(this);
let filePath = contextFaker.filesDir + '/sharetest.jpg';
let result2 = that.isUint8Array(resultData)
Log.debug('2看看是不是uint8Arr:'+result2)
Log.debug('filePath:'+filePath)
Log.debug('查看沙箱路径:'+fileUri.getUriFromPath(filePath))
let shareData: systemShare.SharedData = new systemShare.SharedData({
utd: utd.UniformDataType.IMAGE,
uri:fileUri.getUriFromPath(filePath),
title: '图片标题', // 不传title字段时,显示图片文件名
description: '图片描述' // 不传description字段时,显示图片大小
});
Log.debug('shareData:'+JSON.stringify(shareData))
let controllerx: systemShare.ShareController = new systemShare.ShareController(shareData);
let contextx = getContext(this) as common.UIAbilityContext;
controllerx.show(contextx, {
previewMode: systemShare.SharePreviewMode.DETAIL
});
}
writeFile(){
const context = getContext(this) as common.UIAbilityContext
const fileDir = context.filesDir;
[
[context.resourceManager.getMediaContentSync($r('app.media.sharetest')),'/sharetest.jpg']
].forEach(item=>{
let file = fs.openSync(fileDir + item[1], fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
let resultUint = new Uint8Array(Share.imageData.data.buffer)
// let writeLen = fs.writeSync(file.fd,(item[0] as Uint8Array).buffer)
let writeLen = fs.writeSync(file.fd,resultUint.buffer)
Log.debug('write data to file Suc and size is:'+writeLen)
fs.closeSync(file)
})
}
async getImageData(context:CanvasRenderingContext2D){
let imagePath = 'image/sharetest.jpg'
let imageData = await this.generateShareImage(imagePath,context)
Share.imageData = imageData
Log.debug('image data 赋值成功')
}
async generateShareImage(imagePath:string,context:CanvasRenderingContext2D){
let img:ImageBitmap = new ImageBitmap(imagePath)
const settings: RenderingContextSettings = new RenderingContextSettings(true)
Log.debug('开始生成二维码')
const piexMap = await this.generateQRcode()
Log.debug('生成二维码结束')
context.drawImage(img,0,0,300,300)
context.drawImage(piexMap,0,0,100,100)
let imageData = context.getImageData(0,0,300,300)
return imageData
}
generateQRcode():Promise<image.PixelMap> {
return new Promise((resolve,reject)=>{
let content: string = 'https://www.baidu.com';
let options: generateBarcode.CreateOptions = {
scanType: scanCore.ScanType.QR_CODE,
height: 200,
width: 200
}
let img:ImageBitmap = new ImageBitmap("image/testbg.png")
try {
// 码图生成接口,成功返回PixelMap格式图片
generateBarcode.createBarcode(content, options).then((result: image.PixelMap) => {
hilog.info(0x0001, 'hgh_logs', 'Promise createBarCode result: %{public}s', typeof result);
resolve(result)
}).catch((error: BusinessError) => {
hilog.error(0x0001, 'hgh_logs', 'Promise Error: %{public}s', JSON.stringify(error));
reject(error)
})
} catch (error) {
hilog.error(0x0001, 'hgh_logs', 'Failed createBarCode Error: %{public}s', JSON.stringify(error));
reject(error)
}
})
}
}
更多关于HarmonyOS 鸿蒙Next怎么在图片上添加二维码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
在HarmonyOS鸿蒙Next中,可以通过使用Image
组件和QRCode
组件在图片上添加二维码。首先,使用Image
组件加载图片,然后使用QRCode
组件生成二维码,并通过布局将二维码叠加在图片上。具体步骤如下:
- 加载图片:使用
Image
组件加载需要添加二维码的图片。
<Image src="path_to_image" width="300" height="300" />
- 生成二维码:使用
QRCode
组件生成二维码,并设置二维码的内容和大小。
<QRCode value="https://example.com" size="100" />
- 叠加二维码:通过布局将二维码叠加在图片上。可以使用
Stack
组件来实现叠加效果。
<Stack>
<Image src="path_to_image" width="300" height="300" />
<QRCode value="https://example.com" size="100" />
</Stack>
通过以上步骤,可以在HarmonyOS鸿蒙Next中实现在图片上添加二维码的功能。
更多关于HarmonyOS 鸿蒙Next怎么在图片上添加二维码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS(鸿蒙Next)中,可以通过以下步骤在图片上添加二维码:
- 生成二维码:使用第三方库或在线工具生成二维码图片。
- 加载图片:使用
Image
组件加载原始图片。 - 叠加二维码:使用
Canvas
或Stack
布局将二维码图片叠加到原始图片上。 - 保存图片:使用
ImageSaver
或Canvas
的toDataURL
方法保存最终图片。
示例代码:
import { Image, Canvas, Stack } from '@ohos/graphics';
// 加载原始图片和二维码
const originalImage = Image.load('path/to/original.jpg');
const qrCodeImage = Image.load('path/to/qrcode.png');
// 创建Canvas并绘制图片
const canvas = new Canvas(originalImage.width, originalImage.height);
canvas.drawImage(originalImage, 0, 0);
canvas.drawImage(qrCodeImage, x, y); // x, y为二维码位置
// 保存最终图片
const finalImage = canvas.toDataURL();
ImageSaver.save(finalImage, 'path/to/final.jpg');