当前位置: 首页 > news >正文

uniapp app端水印组件封装 一次引入版

直接上代码

<template><view><canvas canvas-id="myCanvas"style="width: 100vw; height: 100vh;opacity: 0;position: fixed;top: -1000px;"></canvas></view>
</template><script>export default {name: "watermark",data() {return {screenWidth: '',screenHeight: ''};},mounted() {// 获取屏幕宽高this.screenWidth = plus.screen.resolutionWidth;this.screenHeight = plus.screen.resolutionHeight;// 初始化画布this.init()},methods: {show(path) {const view = new plus.nativeObj.View('watermark', {top: '0px',left: '0px',height: '100%',width: '100%',opacity: 0.2});let popupViewContentList = [{src: path,id: "logo",tag: "img",position: {top: "0px",left: "0px",width: this.screenWidth + 'px',height: this.screenHeight + "px",}}]view.draw(popupViewContentList);view.interceptTouchEvent(false)view.show()// uni全局引用 方便个别页面关闭uni.$view = view},init() {let that = thisconst ctx = uni.createCanvasContext('myCanvas', this);// 在 Canvas 上绘制图形、文本等let angleInRadians = -45 * Math.PI / 180;// 将原点移动到画布中心ctx.translate(this.screenWidth / 2, this.screenHeight / 2);// 旋转画布ctx.rotate(angleInRadians);// 绘制透明背景ctx.fillStyle = 'rgba(0, 0, 0, 0)';ctx.fillRect(-100, -1000, this.screenWidth, this.screenHeight);ctx.setFillStyle('#000');ctx.setFontSize(12);for (let i = 0; i < 100; i++) {for (let j = 0; j < 6; j++) {ctx.fillText( new Date(), 300 * j - 600, 40 * i - 1000);}}// ctx.rotate('45')ctx.draw(true, () => {// 画布转换图片uni.canvasToTempFilePath({canvasId: 'myCanvas',fileType: 'png',x: 0,y: 0,width: this.screenWidth,height: this.screenHeight,quality: 1,complete: function(res) {// 创建水印that.show(res.tempFilePath)},});});}}}
</script><style>
</style>

相关文章:

uniapp app端水印组件封装 一次引入版

直接上代码 <template><view><canvas canvas-id"myCanvas"style"width: 100vw; height: 100vh;opacity: 0;position: fixed;top: -1000px;"></canvas></view> </template><script>export default {name: "…...

最新Unity游戏主程进阶学习大纲(2个月)

过完年了&#xff0c;很多同学开始重新规划自己的职业方向,找更好的机会,准备升职或加薪。今天给那些工作了1~5年的开发者梳理”游戏开发客户端主程”的学习大纲&#xff0c;帮助大家做好面试准备。适合Unity客户端开发者。进阶主程其实就是从固定的几个方面搭建好完整的知识体…...

NoSQL 数据库管理工具,搭载强大支持:Redis、Memcached、SSDB、LevelDB、RocksDB,为您的数据存储提供无与伦比的灵活性与性能!

NoSQL 数据库管理工具&#xff0c;搭载强大支持&#xff1a;Redis、Memcached、SSDB、LevelDB、RocksDB&#xff0c;为您的数据存储提供无与伦比的灵活性与性能&#xff01; 【官网地址】&#xff1a;http://www.redisant.cn/nosql 介绍 直观的用户界面 从单一应用程序中同…...

基于Spring Boot的多级缓存系统设计

在构建大规模应用时&#xff0c;缓存系统是提高性能的关键因素之一。为了更有效地利用缓存&#xff0c;我们可以设计一个基于Spring Boot的多级缓存系统&#xff0c;结合本地内存缓存&#xff08;如Caffeine&#xff09;和分布式缓存&#xff08;如Redis&#xff09;。以下是一…...

k8s-配置与存储-配置管理

文章目录 一、配置存储1.1 ConfigMap1.1.1.基于文件夹的创建方式1.1.2指定文件的创建方式1.1.3 配置文件创建configmap 1.2 Secret1.2.1Secret的应用与Docker仓库 Secret设置1. Kubernetes 中的 Secrets&#xff1a;创建 Secret 示例&#xff1a;将 Secret 挂载到 Pod 中的示例…...

c语言实现bellman-ford算法

下面是使用C语言实现Bellman-Ford算法的示例代码。Bellman-Ford算法用于在带权重的图中找到从单个源点到所有其他顶点的最短路径,它也能处理图中包含负权重边的情况。 #include <stdio.h> #include <stdlib.h> #include <limits.h>// 定义边的结构 struct …...

socket与rpc的区别

如今的游戏开发&#xff0c;不搞个跨服玩法都不好意思说在做游戏了&#xff08;当然&#xff0c;也跟游戏类型有关&#xff0c;一些轻度休闲游戏可以排除在外&#xff09;。跨服玩法的设计&#xff0c;可以进一步激发玩家追求高战力的虚荣心&#xff0c;也可以汇聚玩家数量&…...

10、内网安全-横向移动域控提权NetLogonADCSPACKDC永恒之蓝

用途&#xff1a;个人学习笔记&#xff0c;有所借鉴&#xff0c;欢迎指正&#xff01; 背景&#xff1a; 主要针对内网主机中的 域控提权漏洞&#xff0c;包含漏洞探针和漏洞复现利用。 1、横向移动-系统漏洞-CVE-2017-0146&#xff08;ms17-010&#xff0c;永恒之蓝&#xff0…...

代码随想录算法训练营第三八天 | 动态规划

目录 动态规划基础斐波那契数爬楼梯使用最小花费爬楼梯 LeetCode 509. 斐波那契数 LeetCode 70. 爬楼梯 LeetCode 746. 使用最小花费爬楼梯 动态规划基础 Dynamic Programming (DP) 如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 动态规划中每一个状态…...

【ubuntu2004安装N卡驱动】

软硬件环境 硬件&#xff1a;联想notebook16&#xff0c;显卡4060laptop 软件&#xff1a; ubuntu20.04 驱动安装成功的版本&#xff1a;NVIDIA-Linux-x86_64-535.146.02.run 使用默认的驱动安装&#xff0c;没用原因如下 让手动安装。 手动安装 环境准备&#xff1a; sudo …...

使用 Docker 安装 Kibana 8.4.3

使用 Docker 安装 Kibana 8.4.3 一. 安装启动 Kibana 8.4.3二. 简单使用2.1 向 Elasticsearch 发送请求2.2 搜索2.3 整体页面 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 安装k…...

基于python社交网络大数据分析系统的设计与实现

项目&#xff1a;基于python社交网络大数据分析系统的设计与实现 摘 要 社交网络大数据分析系统是一种能自动从网络上收集信息的工具&#xff0c;可根据用户的需求定向采集特定数据信息的工具&#xff0c;本项目通过研究爬取微博网来实现社交网络大数据分析系统功能。对于采集…...

【设计模式】23种设计模式笔记

设计模式分类 模板方法模式 核心就是设计一个部分抽象类。 这个类具有少量具体的方法&#xff0c;和大量抽象的方法&#xff0c;具体的方法是为外界提供服务的点&#xff0c;具体方法中定义了抽象方法的执行序列 装饰器模式 现在有一个对象A&#xff0c;希望A的a方法被修饰 …...

编程笔记 Golang基础 009 标识符和关键字

编程笔记 Golang基础 009 标识符和关键字 一、标识符二、标识符分类&#xff08;一&#xff09;空白标识符&#xff08;又称下划线 _&#xff09;&#xff08;二&#xff09;预声明标识符&#xff08;三&#xff09;唯一标识符&#xff08;四&#xff09;导出标识符 三、关键字…...

vue3中mockjs模拟获取数据

开发项目的时候&#xff0c;如果后端接口没有出来&#xff0c;前端工程师也不必非得等接口出来才进行下步开发。可以使用mock.js来模拟接口数据&#xff0c;以下就是使用vue3设置hook函数来封装axios请求&#xff0c;配合mock.js来实现的代码&#xff0c;mock的官网 Mock.js 一…...

element ui 添加自定义方法

今天在修改 el-table 源码过程中遇到一个头大的问题&#xff0c;原本修改编译后&#xff0c;将 element的子目录lib下的文件复制到项目的响应目录里就可以了&#xff0c;但是&#xff0c;这次不知为何&#xff0c;编译老是出问题&#xff0c;实在没有办法&#xff0c;我就直接修…...

Hive UDF

当Hive提供的内置函数不能满足查询需求时&#xff0c;用户可以根据自己业务编写自定义函数&#xff08;User Defined Functions, UDF), 然后在HiveQL中调用。 例如有这样一个需求&#xff1a;为了保护用户隐私&#xff0c;当查询数据的时候&#xff0c;需要将用户手机号的中间…...

python Opencv 中绘制图

目录 一:绘制直线 二:绘制矩形 三:绘制圆形 四:绘制椭圆...

imazing软件安全吗?2024中文永久免费许可证

以下是iMazing更多的使用场景描述&#xff1a; iMazing3Mac-最新绿色安装包下载如下&#xff1a; https://wm.makeding.com/iclk/?zoneid49816 iMazing3Win-最新绿色安装包下载如下&#xff1a; https://wm.makeding.com/iclk/?zoneid49817 1. 数据迁移 当你换新的iOS设…...

JavaScript:防抖与节流

文章目录 防抖(Debounce)节流 (Throttle) 在JavaScript中&#xff0c;防抖&#xff08;debounce&#xff09;和节流&#xff08;throttle&#xff09;是两种优化函数调用频率的策略&#xff0c;它们主要用于限制频繁触发的事件回调函数执行次数&#xff0c;以防止过多不必要的计…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...