相关问题
基于原生能力的跨应用跳转
266浏览 • 1回复 待解决
基于原生能力的网络加载性能分析
232浏览 • 1回复 待解决
基于原生能力的设备唯一ID方案
186浏览 • 1回复 待解决
如何使用canvas添加水印
397浏览 • 1回复 待解决
基于原生的跨模块资源访问
260浏览 • 1回复 待解决
基于原生实现高级显示效果
135浏览 • 1回复 待解决
添加候选网络配置,使用有关能力接口添加候选网络配置
249浏览 • 1回复 待解决
基于ArkUI现有能力实现自定义弹窗封装方案
148浏览 • 1回复 待解决
canvas如何实现水印效果
350浏览 • 1回复 待解决
基于webView的嵌套滚动
127浏览 • 1回复 待解决
鸿蒙是基于Android的吗?
9821浏览 • 2回复 已解决
基于RichEditor的评论编辑
171浏览 • 1回复 待解决
PolarDB 云原生HTAP 的整体架构是什么?
1533浏览 • 1回复 待解决
基于measure实现的文本测量
144浏览 • 1回复 待解决
基于bindSheet的半模态弹窗
161浏览 • 1回复 待解决
OpenHarmony 编译原生设置settings报错
1587浏览 • 0回复 待解决
HDF层驱动和linux原生驱动
2415浏览 • 1回复 待解决
原子布局能力对应的api
7992浏览 • 1回复 待解决
webview和原生进行通信的方式有哪些?怎么实现
642浏览 • 1回复 待解决
原生跳转到webview 页面,window对象的localStorage没有了
492浏览 • 0回复 待解决
基于mysql的悲观锁的运用场景?
1335浏览 • 1回复 待解决
华为手机如何调用谷歌原生的生物识别API?
6638浏览 • 1回复 待解决
PolarDB 云原生HTAP 的整体架构有什么好处?
1610浏览 • 1回复 待解决
是否有查看c++内存的能力
249浏览 • 1回复 待解决
基于加解密算法框架的规格问题
194浏览 • 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保存在系统相册中