uniapp电子签名以及竖屏签名后内容旋转90度变为横屏图片

news2024/11/13 8:58:23

用该插件挺不错的
电子签名插件地址
如果你一个页面要用多个该插件,就改成不同的cavas-id,修改插件源码
效果图
竖屏写
在这里插入图片描述
旋转成横屏图片
在这里插入图片描述

插件内
在这里插入图片描述

在这里插入图片描述

在拿到签名临时地址后的页面

<!-- 旋转图片canvas -->
<canvas canvas-id="camCacnvs" :style="{'position':'absolute','top':'-2000%','width':canvasWidth+'px','height':canvasHeight+'px'}"></canvas>

data(){
	return{
		canvas:'',
		canvasWidth:300,
		canvasHeight:150,
	}onReady() {
   this.canvas = uni.createCanvasContext('camCacnvs')
},
methods:{
	//签名图片
	svaeSignImg(e){
		const that = this;
		console.log('大签名图片',e)				  
		
		let tempFilePaths = e.url;
		uni.getImageInfo({ // 获取图片的信息
			src: tempFilePaths,
			success: (msg) => {
				that.canvas.fillStyle = '#fff';
				that.canvas.fillRect(0, 0, that.canvasWidth, that.canvasHeight);
				
				// 逆时针旋转90度
				that.canvas.translate(that.canvasWidth / 2, that.canvasHeight / 2)
				that.canvas.rotate(270 * Math.PI / 180)
				// that.canvas.drawImage(msg.path, -4*width/5, -height/2, height, width);
				
				//如果你修改了画布后不能完全展示出来,可以调整这下面四个参数
				//因为翻转了,所以分别是 靠上,靠左,高,宽,慢慢修改,不然很容易就超出界面了,然而以为没显示出来
				 that.canvas.drawImage(msg.path, -that.canvasWidth*0.25, -that.canvasHeight*0.9, that.canvasWidth*0.5, that.canvasHeight*1.8)
				 that.canvas.draw(false,() => {
				 		console.log('gggggggggggg渲染完成')
				 		uni.canvasToTempFilePath({
				 			canvasId: 'camCacnvs',
				 			destWidth: that.canvasWidth,
				 			destHeight: that.canvasHeight,
				 			fileType: 'png',
				 			quality: 1, //图片质量
				 			success(vas) {
				 				console.log('完成',vas)
				 			},
				 			fail(err){
				 				console.log(err)
				 			}
				 		}) 
				 	
				 })
			}
		})
	}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/729803.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

第二次CCF计算机软件能力认证

第一题&#xff1a;相邻数对 给定 n 个不同的整数&#xff0c;问这些数中有多少对整数&#xff0c;它们的值正好相差 1。 输出格式 输入的第一行包含一个整数 n&#xff0c;表示给定整数的个数。 第二行包含所给定的 n 个整数。 输出格式 输出一个整数&#xff0c;表示值正好相…

华为OD计算工时python脚本

前言 刚入职不知道工时要平均每天满8小时&#xff0c;并且看不到每天的实际工时&#xff0c;一气之下花了一个中午写了个脚本计算每天的工时&#xff0c;分享一下&#xff0c;不同地区的兄弟需要修改一下午休和晚饭时间才能使用。 文件位置 把welink上 上下班时间输入work.c…

支持向量机推导之r||w||=1的限制转化

支持向量机推导之r||w||1的限制转化 很多同学肯定是学过支持向量机的&#xff0c;也可能大致的理解了支持向量机这个算法&#xff0c;我想大部分人在学习这个算法的时候&#xff0c;对于推导过程有一步应该是不太理解。 我先简要介绍一下SVM,SVM的核心思想在于找到一个多维空间…

getCurrentInstance

https://blog.csdn.net/m0_46318298/article/details/130726043 注&#xff1a;$是在vue中所有实例中都可用的一个简单约定&#xff0c;这样做会避免和已被定义的数据&#xff0c;方法&#xff0c;计算属性产生冲突。

Leetcode-每日一题【203.移除链表元素】

题目 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; 输入&#…

nginx白名单配置

在有得项目中&#xff0c;我们会希望端口只有特定的用户可以访问&#xff0c;这时候就需要配置nginx的白名单&#xff0c;接来下展示一下白名单的配置和应用 vi /etc/nginx/nginx.conf server {listen 80;listen [::]:80;server_name _;root /usr/share/…

springboot第29集:springboot项目详细

public static LoginUser getLoginUser()&#xff1a;该行声明了一个公共的静态方法 getLoginUser()&#xff0c;它的返回类型是 LoginUser。try&#xff1a;开始一个 try 块&#xff0c;用于处理接下来的代码中可能发生的异常。return (LoginUser) getAuthentication().getPri…

STL好难(6):queue队列的使用

目录 1.queue的介绍 2.queue的使用&#xff1a; 3.queue的模拟实现&#xff1a; 4.deque的介绍&#xff1a; 5.deque的函数接口和底层原理&#xff1a; 6.deque的优缺点&#xff1a; 1.queue的介绍 queue的文档内容 1. 队列是一种容器适配器&#xff0c;专门用于在FIFO上…

二次-InsCode Stable Diffusion 美图活动一期

模型&#xff1a; AbyssOrangeMix2 - SFW_Soft NSFW_AbyssOrangeMix2_sfw.safetensors 参数配置&#xff1a; 正&#xff1a;Mountains and seas, people 负&#xff1a;NSFW, (worst quality:2), (low quality:2), (normal quality:2), lowres, normal quality, ((monochr…

C# .NET 如何调用 SAP RFC 接口

1.分析传参结构 SAP 传参格式对应 .NET 参数格式 SAP 参数.NET 参数参数类型import(导入)——关联类型为数据元素Param单个变量参数import(导出)——关联类型为结构体Struct结构体tableTable表 下面是 SAP 对应参数类型&#xff1a; 2.web.config 配置 配置文件需要客户端…

Python学习笔记(十六)————异常相关

目录 &#xff08;1&#xff09;异常概念 &#xff08;2&#xff09;异常的捕获 ①异常捕获的原因 ②捕获常规异常 ③捕获指定异常 ④捕获多个异常 ⑤ 捕获异常并输出描述信息 ⑥捕获所有异常 ⑦异常else ⑧异常的finally &#xff08;3&#xff09;异常的传递 &#xff08…

自动化测试 selenium 篇

✏️作者&#xff1a;银河罐头 &#x1f4cb;系列专栏&#xff1a;JavaEE &#x1f332;“种一棵树最好的时间是十年前&#xff0c;其次是现在” 目录 什么是自动化测试&#xff1f;Selenium 介绍Selenium 是什么Selenium 特点工作原理 seleniumJava环境搭建ChromeJava1.下载ch…

uni-app:删除默认title

去除前&#xff1a; 可以看到有两个title 去除后&#xff1a; 可以看出就只有手机顶部的title了 "navigationStyle": "custom",//删除默认title

堆的向上与向下调整

目录 一、堆 1、概念 2、性质 二、向上调整 三、向下调整 四、建堆的比较 1.向上调整建堆 2.向下调整建堆 3.比较 五、总结 一、堆 1、概念 如果有一个关键码的集合K {k0k1&#xff0c;k2&#xff0c;…kn-1}&#xff0c;把它的所有元素按完全二叉树的顺序存储方式存…

怎么学习PHP错误处理和调试? - 易智编译EaseEditing

学习PHP错误处理和调试技术可以通过以下步骤&#xff1a; 理解错误类型&#xff1a; 了解PHP中常见的错误类型&#xff0c;如语法错误、运行时错误和逻辑错误等。学习它们的特点和常见原因&#xff0c;以便更好地定位和解决问题。 错误报告设置&#xff1a; 在开发环境中&am…

【Java基础学习打卡14】Java注释

目录 前言一、什么是注释二、注释的重要性三、单行、多行注释1.单行注释2.多行注释 四、文档注释1.文档注释2.JDK官网文档3.javadoc生成文档 五、注释建议总结 前言 本文介绍Java注释&#xff0c;它是我们在Java编程中必不可少的。Java注释有单行注释、多行注释和文档注释。对…

BUUCTF Web CyberPunk WriteUp

想直接查看payload的点这里 前言 二次注入&#xff08;Second-Order Injection&#xff09;是指攻击者在应用程序中注入恶意数据&#xff0c;然后在稍后的操作或不同的上下文中再次使用该恶意数据&#xff0c;导致安全漏洞。它通常发生在数据库查询、数据导出、报告生成等过程…

基于springboot博客论坛系统设计与实现(源码+文档LW+数据库+报告)

HBLOG 是一个博客论坛网站&#xff0c;分为游客端和管理员端。游客端主要有注册登录&#xff0c;查看文章&#xff0c;发表撰写文章&#xff0c;管理自己的文章&#xff0c;评论文章等功能&#xff1b;而管理员端主要有登录&#xff0c;查看近期数据&#xff0c;查看日志&#…

如何做好迭代回顾 2/4

事故根因分析&#xff1a;上集 北京某软件开发公司&#xff0c;专门为电信供应商做定制软件开发&#xff0c;比如发短信做些推广活动等。公司希望做过程改进&#xff0c;我首次与公司老板访谈&#xff1a; 我&#xff1a;过程改进主要帮助管理层更好达到公司业务目标。你们自己…

365天深度学习训练营-第T5周:运动鞋品牌识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 我的环境&#xff1a; 语言环境&#xff1a;Python3.10.7编译器&#xff1a;VScode深度学习环境&#xff1a;TensorFlow2 一、前期工作&#xff1a; 1、导入…