相关问题
基于原生能力的组件封装
1721浏览 • 1回复 待解决
基于原生能力的跨应用跳转
2033浏览 • 1回复 待解决
基于原生能力的网络状态感知
1837浏览 • 1回复 待解决
基于原生能力的网络加载性能分析
2185浏览 • 1回复 待解决
基于原生能力的设备唯一ID方案
2253浏览 • 1回复 待解决
基于原生能力实现图文混排
1784浏览 • 1回复 待解决
基于原生的应用主题开发
1806浏览 • 1回复 待解决
基于TLSSocket的通信能力
1766浏览 • 1回复 待解决
HarmonyOS windows级别添加水印
836浏览 • 1回复 待解决
如何使用canvas添加水印
2685浏览 • 1回复 待解决
HarmonyOS是否支持图片添加水印
1228浏览 • 1回复 待解决
HarmonyOS拍照后图片添加水印
1113浏览 • 1回复 待解决
基于原生实现高级显示效果
1822浏览 • 1回复 待解决
基于原生的跨模块资源访问
2014浏览 • 1回复 待解决
HarmonyOS原生分享能力的使用
2169浏览 • 1回复 待解决
HarmonyOS 如何给 app 添加水印
1520浏览 • 1回复 待解决
基于@ohos/axios的网络请求能力
1795浏览 • 1回复 待解决
HarmonyOS 有没有对UI添加水印的方法
857浏览 • 1回复 待解决
HarmonyOS PDF添加水印后展示白屏
874浏览 • 1回复 待解决
基于ArkUI实现类似.9图的拉伸能力
1896浏览 • 1回复 待解决
Waterflow怎么添加header能力?
1301浏览 • 1回复 待解决
HarmonyOS 如何在app内全页面添加水印
1130浏览 • 1回复 待解决
HarmonyOS 系统原生能力是否支持PDF预览
1822浏览 • 1回复 待解决
如何使用原生能力人脸识别api?
1207浏览 • 1回复 待解决
HarmonyOS 原生能力是否提供相机编辑功能
1090浏览 • 1回复 待解决
添加水印是一个比较常见的功能,下面列举一些遇到的业务需求:
方案描述
场景一:
在页面背景上添加全局水印
效果图
方案
页面全局水印的实现思路是使用透明背景的canvas画布绘制文字水印,在使用Stack组件叠加在page跟容器上
方式一:使用canvas进行绘制
方式二:使用overlay属性绘制
方式二思路与方式一实现思路一致,该方式可以讲水印组件单独拧出来,在其他使用时使用overlay属性来使用,实现效果与方式一一致
场景二:
保存图片添加水印
效果图
方案
使用OffScreenCanvas离屏画布拿到图片源数据,在离屏画布上使用OffscreenCanvasRenderingContext2D.drawImage方法讲图片数据进行绘制,使用OffscreenCanvasRenderingContext2D.fillText方法绘制文字水印,通过 OffscreenCanvasRenderingContext2D.getPixelMap方法获取添加水印后的图片pixelMap数据,再通过安全控件方式拿到图库的uri路径,在这个uri下通过image.createImagePacker方法创建图片文件,通过fs.write方法写入这个图库的文件中,具体实现代码如下所示
核心代码
第一步:使用resourceManager.getMediaContent方法获取当前的图片资源
第二步:使用image.createImageSource方法创建图片资源,在使用OffscreenCanvasRenderingContext2D.drawImage方法绘制图片在离屏画布上
第三步:使用OffscreenCanvasRenderingContext2D.fillText绘制水印
第四步:使用OffscreenCanvasRenderingContext2D.getPixelMap取出绘制后的图片数据
第五步:使用SaveButton保存到图库中
场景三:
拍照添加水印
方案
使用cameraPicker拉起系统相机拍照,拿到返回的picker.PickerResult.resultUri后使用fs.openSync读出图片文件转化为pixelMap,使用image组件渲染在页面上,在保存图片的时候通过drawing.TextBlob.makeFromString方法绘制水印后保存
核心代码
第一步:使用cameraPicker拉起系统相机
第二步:将相机拍摄的照片渲染在页面中,使用fs.readSync读出文件字节流,再使用image.createImageSource创建图片资源管理器获取到图片的pixelMap
第三步:使用drawing.TextBlob.makeFromString绘制水印后 使用SaveButton保存在系统相册中