相关问题
canvas如何实现水印效果
357浏览 • 1回复 待解决
基于原生的水印添加能力
192浏览 • 1回复 待解决
如何直接通过函数去编辑图片,比如pixelMap或者说给图片加水印文字这种操作
560浏览 • 1回复 待解决
如何操作canvas重新绘制
353浏览 • 1回复 待解决
Canvas绘制内容如何动态更新
368浏览 • 1回复 待解决
Canvas如何触发刷新重复绘制?
327浏览 • 1回复 待解决
如何实现主动控制组件刷新?例如在使用Canvas的场景需要使用代码主动刷新UI
568浏览 • 1回复 待解决
使用canvas渲染文本时,如何基于文本变化,正确绘制出对应的内容?
538浏览 • 1回复 待解决
添加候选网络配置,使用有关能力接口添加候选网络配置
254浏览 • 1回复 待解决
鸿蒙Canvas中drawText如何处理文字自动换行
8892浏览 • 1回复 待解决
JS UI框架中canvas如何动态指定宽高
5175浏览 • 1回复 待解决
如何使用canvas绘制图形?环境是API6,java编写自定义组件
1089浏览 • 1回复 待解决
canvas 貌似不识别啊?
5153浏览 • 1回复 待解决
The <canvas> component does not exist.
6944浏览 • 3回复 待解决
Canvas如何绘制app.media下面的图片?
842浏览 • 1回复 待解决
图片如何添加渐变模糊
580浏览 • 1回复 待解决
鸿蒙自定义组件,如何在Ondraw()方法中使用canvas绘制一张资源图片?
4303浏览 • 1回复 待解决
解决Canvas画布缩放时闪烁
356浏览 • 1回复 待解决
PA开发,如何添加日历提醒?
2456浏览 • 1回复 待解决
鸿蒙-富文本如何添加图片
5323浏览 • 1回复 待解决
LazyForEach如何添加数据?
637浏览 • 1回复 待解决
如何给按钮添加图片?
837浏览 • 3回复 待解决
鸿蒙开发中如何用canvas实现图片的运动效果
2297浏览 • 1回复 待解决
如何用PixelMap实现图片的水平镜像?不借用Canvas
6314浏览 • 1回复 待解决
需要实现为image添加文字、增加马赛克、水印等功能。
需要支持如下功能点:
当前已实现功能:
暂未实现功能点:
使用的核心API
核心代码解释
功能1:从图片导入图片
导入图片主要使用picker.PhotoViewPicker()API拉起图片选择图片,相关代码如下:
从图库中读取图片后使用fs的相关接口将其转化为ArrayBuffer方便后期操作,拿到该图片的buffer以后就可以在canvas中绘制该图片了,因为屏幕大小是固定的,显示图片的区域也是固定的,而图片的大小是可变的,所以在绘制图片的时候我们需要进行一些比例换算,这里只做了竖图的适配,暂未实现横图适配,核心代码如下:
代码解释:
主要逻辑就是在createPixelMap的回调中,通过getComponentRect("imageContainer")接口获取屏幕中实际显示图片区域的宽度,然后除以图片的实际宽度得到一个缩放比例imageScale,在绘制的时候将画笔进行矩阵变换x与y轴都缩放该比例,然后使用drawImage从画布的左上角开始绘制,这样可以得到一张等比例的图片会知道界面中
功能2:添加水印/文字
当前实现的水印就是文字水印,也可以绘制图片水印等等,这个可以根据需要自己自定义,主要实现思路就是在当前的画布中在指定的位置继续绘制文字/图片即可
功能3:保存到本地图库
这里保存可以有两种方式,一种是保存到图库,一种是保存到文件管理,实现方式不一样
保存到图库
ps: 这里有一点说明下,当前实现的仅仅只是恢复原图的像素比例,还是会有图片被压缩导致的轻微失真现象,该问题在想办法优化中
保存到图库官网接口更改了需要使用安全控件来保存,核心代码如下
代码解释:
主要是使用photoAccessHelperAPI接口获取到图库的uri地址,然后因为我们在绘制图片的时候是对图片进行了缩放的,现在需要吧缩放的图片还原回原来的大小,所以我们新建了一个OffscreenCanvas,大小就是原图的大小,然后获取我们添加了水印的图片——也就是我们页面中能看到的canvas,主要是使用getPixelMap接口,将该数据绘制在OffscreenCanvas中然后通过saveToFile保存下来,saveToFile代码如下
完整代码
Index.ets
utils.ts