HarmonyOS鸿蒙Next中ArkTS如何画图并保存

HarmonyOS鸿蒙Next中ArkTS如何画图并保存 每次发帖都要先表达下，我是一个业余的中老年爱好者，纯属是为了支持国产，但愿各位青年才俊不吝赐教。

之前写Android画图这样写：

Bitmap mbmp = Bitmap.createBitmap(bitmapwidth, bitmapheight, Bitmap.Config.ARGB_8888);
Canvas mcanvas = new Canvas(mbmp);
然后Canvas上面画图，然后再把Bitmap保存为图片文件。
FileOutputStream fos = new FileOutputStream(photofilepath);
mbmp.compress(Bitmap.CompressFormat.JPEG, 100, fos);
fos.close();

后来2.0版的鸿蒙，也是JAVA语言，我历经各种百度，也不知道自己怎么折腾成功了。这样写的：

PixelMap.InitializationOptions initializationOptions = new PixelMap.InitializationOptions();
initializationOptions.size = new Size(bitmapwidth, bitmapheight * scalebitmap);
initializationOptions.pixelFormat = PixelFormat.ARGB_8888;
initializationOptions.editable = true;
PixelMap pixelMap = PixelMap.create(initializationOptions);
Texture myTexture = new Texture(pixelMap); //Texture与PixelMap联系
Canvas mcanvas = new Canvas();
mcanvas.setTexture(myTexture);
然后Canvas上面画图，然后再把PixelMap保存为图片文件。
ImagePacker imagePacker = ImagePacker.create();
FileOutputStream outputStream = null;
try {
    File file = new File(getPath, "Test.jpg");
    outputStream = new FileOutputStream(file);
} catch (FileNotFoundException e) {
    e.printStackTrace();
}
ImagePacker.PackingOptions packingOptions = new ImagePacker.PackingOptions();
packingOptions.format = "image/jpeg";
packingOptions.quality = 90;
imagePacker.initializePacking(outputStream, packingOptions);
imagePacker.addImage(pixelMap);
imagePacker.finalizePacking();
try {
    outputStream.close();
    new ToastDialog(getApplicationContext()).setText("保存成功" ).setAlignment(LayoutAlignment.CENTER).show();
} catch (java.io.IOException e) {
    e.printStackTrace();
    new ToastDialog(getApplicationContext()).setText("保存失败，无权限！").setAlignment(LayoutAlignment.CENTER).show();
}

现在用4.0实在是不会了，哪位大神能指教一二？


更多关于HarmonyOS鸿蒙Next中ArkTS如何画图并保存的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复 
arkts也是canvas，这套方案是不会变的，只不过是换了个名字  
[https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md/#%E7%94%BB%E5%B8%83%E7%BB%84%E4%BB%B6%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95](https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md/#%E7%94%BB%E5%B8%83%E7%BB%84%E4%BB%B6%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95)

[https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md/](https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md/)

更多关于HarmonyOS鸿蒙Next中ArkTS如何画图并保存的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


没搞懂，等吧。晚点等鸿蒙开发者搞多点例子，我再来学习。不过我有另一个思路，Canvas如果能画大图，超出屏幕的可以缩放看，也可以解决我的问题。

[https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md/#todataurlh] ±/-%/-+ web上canvas常规就是生成base64去操作，我不知道你们java是怎么搞的，

在HarmonyOS鸿蒙Next中，可以使用ArkTS的Canvas组件进行绘图。以下是一个简单的示例代码，展示如何在Canvas上绘制图形并将其保存为图片：

import { Canvas, CanvasRenderingContext2D } from '@ohos.graphics';

// 创建Canvas对象
let canvas = new Canvas(300, 300);
let ctx: CanvasRenderingContext2D = canvas.getContext('2d');

// 绘制图形
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 100, 100);

// 将Canvas内容保存为图片
canvas.toDataURL('image/png').then((dataUrl) => {
  console.log('Image saved as data URL:', dataUrl);
});

toDataURL方法将Canvas内容转换为Base64编码的图片数据，你可以将其保存到文件或上传到服务器。

回到顶部