canvas画布旋转问题

先说一下为什么要旋转的目的:因为在画布上签名,在不同的设备上我需要不同方向的签名图片,电脑是横屏,手机就是竖屏,所以需要把手机的签名旋转270°,因此写了这个方法。

关于画布旋转的重点就是获取到你的画布元素在 onload 函数里面调用图片旋转的方法

里面的methods.imageRotate就是旋转方法,只是基于vue3写的所以有methods

 $("#file").attr("src", canvas.value.toDataURL("image/png"));const fileImg = document.getElementById("file")fileImg.onload = function () {const imgValue = methods.imageRotate(fileImg, 270)// console.log("imgValue", imgValue)}

图片旋转的封装方法

//图片旋转imageRotate(img, rotate) {let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");switch (rotate) {case 90: // 旋转90°canvas.width = img.height;canvas.height = img.width;ctx.rotate((90 * Math.PI) / 180);ctx.drawImage(img, 0, -img.height, img.width, img.height);break;case 180: // 旋转180°canvas.width = img.width;canvas.height = img.height;ctx.rotate((180 * Math.PI) / 180);ctx.drawImage(img, -img.width, -img.height, img.width, img.height);break;case 270: // 旋转270°canvas.width = img.height;canvas.height = img.width;ctx.rotate((-90 * Math.PI) / 180);ctx.drawImage(img, -img.width, 0, img.width, img.height);break;default:canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0, img.width, img.height);break;}return canvas.toDataURL("image/png");},

注:改方法并不会改变画布上的内容,是新建了一个变量来存储。

        *   千万记住要在onload调用

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

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

相关文章

typescript 基本类型

基本类型注解 任意类型 let value: any ;string类型 let message: string hello world;number类型 let orderid: number 0;booblean类型 let openDiolog: boolean false;字符串类型数组 let teachers: string[]; const students: string[] [张, 王];数字类型数组 c…

软件著作权的申请信息在哪看?

软著对于企业来说是一个非常有价值的知识产权。软著可以保证企业自身的利益得到合法的保护,并且可以反映企业的技术创新能力,能够让企业提高自己的竞争力,在申报一些补贴,招标时作为加分项。因此,很多科技型企业都会申…

1982Springboot宠物美容院管理系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot宠物美容院管理系统是一套完善的信息系统,结合springboot框架和bootstrap完成本系统,对理解JSP java编程开发语言有帮助系统采用springboot框架(MVC模式开发),系 统具有完整的源代码和数据库…

DNS的工作原理

DNS的工作原理 DNS(Domain Name System)是一个分布式数据库系统,负责将人类可读的域名转换为互联网上计算机可以理解的IP地址。其工作原理大致分为以下几个步骤: 用户在浏览器或应用中输入域名:当用户键入一个网站地…

RisingWave 用户定义函数 (二): Rust x WebAssembly

RisingWave 支持用户使用 Rust 语言编写自定义函数(UDF)。Rust UDF 会被编译到 WebAssembly,一种最初诞生于浏览器之中的虚拟机汇编语言。随后,这些 UDF 会在 RisingWave 进程中内嵌的 WebAssembly 虚拟机上被即时编译&#xff08…

【QT】Widget

目录 widget常用属性及其作用 enabled geomtry window frame window frame的影响 相关API windowTitle windowIcon qrc机制 qrc使用方式 自定义鼠标图片 设置字体样式 设置鼠标悬停提示 toolTip 控件获取焦点 styleSheet widget常用属性及其作用 属性作用…

手把手教你打造高精度STM32数字时钟,超详细步骤解析

STM32数字时钟项目详解 1. 项目概述 STM32数字时钟是一个集成了时间显示、闹钟功能、温湿度检测等多功能于一体的小型电子设备。它利用STM32的实时时钟(RTC)功能作为核心,配合LCD显示屏、按键输入、温湿度传感器等外设,实现了一个功能丰富的数字时钟系统。 2. 硬件组成 STM…

关于FreeRTOS在MCU(微控制器)和PC(个人计算机)上的源代码的区别

关于FreeRTOS在MCU(微控制器)和PC(个人计算机)上的源代码是否相同,我们可以从以下几个方面来详细分析和总结: 核心源代码: FreeRTOS的核心源代码(如tasks.c和list.c等)在…

IND83081芯片介绍(二)

七、典型应用 上面显示了独立的CAN收发器,而下面则显示了多个iND83081可以共享同一个CAN收发器的应用场景。通过这些连接,iND83081可以实现对多个LED的驱动和控制,同时与外部MCU进行通信 。 八、ELINS接口 1.ELINS简介 ELINS是一种从接口&a…

resume不严格加载model、避免某些层维度不一致导致错误

默认的,我们最常用的resume方式: if args.resume:checkpoint torch.load(resume_path, map_locationcpu)model_without_ddp.load_state_dict(checkpoint[model])print("Resume checkpoint %s" % resume_path)if optimizer in checkpoint and…

Oracle 19C19.3 rac安装并RU升级到19.14

19C支持RU补丁安装。 下载好19.14的RU补丁 [rootrac1 soft]# ll total 9830404 -rw-r--r-- 1 grid oinstall 3059705302 Jun 18 15:26 LINUX.X64_193000_db_home.zip -rw-r--r-- 1 grid oinstall 2889184573 Jun 18 15:27 LINUX.X64_193000_grid_home.zip -rw-r--r-- 1 grid …

C语言—文件IO相关操作

注&#xff1a;若有需要请查看官方文档&#xff1a;头文件#include<stdio.h> 注&#xff1a;要想学会&#xff0c;自己的练几遍&#xff0c;并且详细查看官方文档&#xff1b;一通百通&#xff1b; 1.fopen()函数 FILE * fopen ( const char * filename, const char * …

Antivirus Zap Pro :苹果 mac 电脑全面的系统安全解决方案

Antivirus Zap Pro 是一个全面的系统安全解决方案&#xff0c;它可以扫描和删除 Mac 中的恶意软件和其他恶意软件&#xff0c;还可以检测 Mac 上已经存在的威胁或可疑文件&#xff0c;并保护您的 Mac 免遭日后的威胁&#xff0c;满足用户不同的 Mac 电脑杀毒需求&#xff0c;有…

Firewalld防火墙基础

Firewalld 支持网络区域所定义的网络连接以及接口安全等级的动态防火墙管理工具 支持IPv4、IPv6防火墙设置以及以太网桥 支持服务或应用程序直接添加防火墙规则接口 拥有两种配置模式 运行时配置&#xff1a;临时生效&#xff0c;一旦重启或者重载即不生效 永久配置&#xff1a…

2024年【焊工(初级)】实操考试视频及焊工(初级)考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 焊工&#xff08;初级&#xff09;实操考试视频根据新焊工&#xff08;初级&#xff09;考试大纲要求&#xff0c;安全生产模拟考试一点通将焊工&#xff08;初级&#xff09;模拟考试试题进行汇编&#xff0c;组成一…

vue页面中,通过接口获取json返回值,并导出到Excel中;

vue页面中&#xff0c;通过接口获取json返回值&#xff0c;并导出到Excel中&#xff1b; 注意事项&#xff1a; 1、json中的key翻译成对应标题&#xff1b;2、过滤掉json中不需要的字段&#xff1b; 1、接口返回的json&#xff1a; {"errcode": 0,"data&quo…

【人工智能学习之图像操作(二)】

【人工智能学习之图像操作&#xff08;二&#xff09;】 图像上的运算图像混合按位运算 图像的几何变换仿射变换透视变换膨胀操作腐蚀操作开操作闭操作梯度操作礼帽操作黑帽操作 图像上的运算 图像上的算术运算&#xff0c;加法&#xff0c;减法&#xff0c;图像混合等。 加减…

【FPGA项目】System Generator算法板级验证-快速搭建外围测试电路

&#x1f389;欢迎来到FPGA专栏~System Generator算法板级验证-快速搭建外围测试电路 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;FPGA学习之旅 文章作者技术和水平有限&#xff0c;如果文…

Unity接入微信小游戏授权

官方授权流程图&#xff1a; https://res.wx.qq.com/wxdoc/dist/assets/img/authorize.4981f7f3.png 这里是一个非自定义隐私授权弹窗模式的流程Demo //获取玩家微信头像等数据 public static void GetWXUserInfo() {//授权Action action null;action new Action(()>{Get…

【微服务网关——中间件实现】

1.中间件的意义 避免成为if狂魔提高复用、隔离业务调用清晰、组合随意 2.实现原理 中间件一般都封装在路由上&#xff0c;路由是URL请求分发的管理器中间件选型 基于链表构建中间件 基于责任链的实现缺点&#xff1a;实现复杂&#xff0c;调用方式不灵活 使用数组构建中间件 控…