canvas旋转图片

最终想要的结果

思路

1、移动画布中心点

ctx.translate(x,y);//设置画布上的(0,0)位置，也就是旋转的中心点

2、此时旋转画布，会以（x,y）为中心点

3、所以我们需要将图片中心点也转移到（x,y）

ctx.drawImage(img,-img.width/2,-img.height/2);//把图片绘制在旋转的中心点，

4、旋转角度

ctx.rotate(90*Math.PI/180);

实现

function rotate90(imgUrl, type) {return new Promise(function (resolve, reject) {try {// 1. 创建图片，canvas,获取画布var img = new Image(),canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');img.src = imgUrl;// 2. 图片加载完成进行图片编辑img.onload = function () {// 2.1 设置canvas宽高，旋转90° ，宽高互换canvas.width = this.height;canvas.height = this.width;// 2.2 画布中心点(也是起始点)平移至中心(0,0)->(x,y)ctx.translate(canvas.width / 2, canvas.height / 2);// 2.3 画布旋转90°ctx.rotate(270 * Math.PI / 180);// 2.4 绘制图像 图像起始点需偏移负宽高ctx.drawImage(img, -this.width / 2, -this.height / 2);// 2.5返回结果(base64)resolve(canvas.toDataURL(type));};} catch (error) {reject(error);}});

canvas旋转图片相关推荐

canva旋转图片 js_js 使用canvas 旋转图片
最左边是原始图片,中间是canvas内容,右边是将canvas内容导出到img标签中 canvas绘图时,确定图片的原始尺寸,不是显示的dom大小,需要创建元素后获得如果使用dom大小的话,会在绘制 ...
CSS3图片旋转功能transform:rotate以及Canvas旋转示例
<!DOCTYPE html> <html> <head><title>CSS3旋转图片</title><style>.demo ...
canvas实现图片旋转
canvas实现图片旋转前言代码前言在上一篇实现了 canvas实现压缩图片.现在有需求变了,需要将图片旋转,旋转后正确的显示图片的位置(不能被其他元素遮住),等比例显示图片. 简单的实现如下 ...
canvas签名图片旋转
canvas签名图片旋转前言一.实现思路二.详细代码总结前言当使用canvas完成横屏签名功能时,最后签名图片需要旋转角度,保证图片横铺一.实现思路思路是重新创建应该canvas,将图 ...
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) - 可编辑图片指定区域位置
注: 苹果手机升级IOS14.1系统后,出现图片写入不了CANVAS画布问题解决方法:alloy_paper.js 文件查找代码: this.img.crossOrigin = "Anon ...
小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
java 旋转图片_Java实现图片翻转以及任意角度旋转
最近几天在做一个项目,因为涉及到了图片(绝大部分都不是整图,是把一张张的大图切成小图,也就是Title)的翻转以及90°旋转,弄得焦头烂额.在网上搜索好几天,发现用到的方法都是比较公式化的,对于只是在 ...
vant上传图片转二进制_土旦：移动端 Vue+Vant 的Uploader 实现：上传、压缩、旋转图片-Go语言中文社区...
data() {return{ files: { name:"", type:""}, headerImage:null, picValue:null, upI ...
关于bitamap旋转图片全黑
网上搜了一下bitmap旋转方法,一般分为两种: 一. Bitmap adjustPhotoRotation(Bitmap bm, final int orientationDegree) { // ...

canvas旋转图片

最终想要的结果

思路

实现

canvas旋转图片相关推荐

最新文章

热门文章