用织梦做外文网站,中国互联网四大门户,wordpress 弹窗浮动层,wordpress怎么批量移动分类先说一下为什么要旋转的目的#xff1a;因为在画布上签名#xff0c;在不同的设备上我需要不同方向的签名图片#xff0c;电脑是横屏#xff0c;手机就是竖屏#xff0c;所以需要把手机的签名旋转270#xff0c;因此写了这个方法。 关于画布旋转的重点就是获取到你的画布…先说一下为什么要旋转的目的因为在画布上签名在不同的设备上我需要不同方向的签名图片电脑是横屏手机就是竖屏所以需要把手机的签名旋转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调用
