不如摸鱼去
不如摸鱼去
  • 发布:2023-09-18 23:29
  • 更新:2023-09-18 23:29
  • 阅读:291

Wot Design Uni 组件库新增了 WaterMark 基于Canvas实现的水印组件

分类:uni-app

Wot Design Uni 组件库提供了一个基于Canvas实现的水印组件:支持文本和图像水印

实现方案

H5端

在H5端,我们使用document.createElement创建Canvas元素。这是标准的HTML5方法,可以在浏览器中创建一个Canvas元素。

支付宝小程序和微信小程序端

在支付宝小程序和微信小程序端,我们分别使用createOffscreenCanvas来创建Canvas元素。这是小程序中的标准方法,可以在小程序中创建Canvas。

// 支付宝小程序端  
const canvas = my.createOffscreenCanvas();  

// 微信小程序端  
const canvas = wx.createOffscreenCanvas();

其他平台

对于其他平台,我们使用Uni-App的createCanvasContext方法来创建Canvas元素。这个方法是Uni-App提供的跨平台接口。

const canvasContext = uni.createCanvasContext('myCanvas', this);

效果演示

结语

基于Canvas实现的Uni-App水印组件可以在不同平台上轻松添加水印效果,无论是文本水印还是图像水印。通过创建通用的Canvas,你可以在Uni-App项目中重复使用这个功能,提高开发效率,同时实现跨平台的兼容性。

组件库地址

wot-design-uni 高颜值组件库

0 关注 分享

要回复文章请先登录注册