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调用