jquery-利用canvas让图片旋转角度

前几天，朋友要做个上传图片后，如何让图片旋转角度，并且不影响容器或者随着图片大小改变容器。

先上完整实例效果图

一开始想到的是 给 img 用 css3 的 transform: rotate(90deg);

结果变成这个样子：

角度完全偏离中心了。

手动去调整 img 的 left 和 top 也是无用，不同的图片大小不一样，很难把控。

如果 js 实时去调整图片或者容器的宽高，也不现实，麻烦不说代码一堆。

突然想到用 canvas 可以绘图，最近刚好在研究。

// 获取图片 id
var img = document.getElementById("Img");

// 创建 canvas
var canvas = document.createElement('canvas');

//给 canvas 创建画板
var cxt = canvas.getContext('2d'); 

// 给画板添加宽高
canvas.width = img.width;
canvas.height = img.height;

// 渲染
cxt.drawImage(img, 0, 0);

// 输出到页面中
document.body.appendChild(canvas);

图片绘制了，但是并没有旋转角度，怎么旋转呢？

简单介绍下 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

然后再查看下手册 canvas 提供的方法

根据描述，以下两个方法完全满足我们的需求
translate() // 重新映射画布上的 (x,y) 位置
rotate() // 旋转当前绘图

举个例子，一张图片宽高为 w:100,h:300 的时候，旋转 90° 后，宽高应为： w:300,h:100

为什么要用 translate() 呢，因为旋转角度是以 x 为起点的，如果不用这个方法，绘制出来后你会看不到图像的。

x 添加到水平坐标（x）上的值
y 添加到垂直坐标（y）上的值

根据例子，代码应为：

cxt.translate(300, 0); // 坐标 x, y
cxt.rotate(90 * Math.PI / 180);

怎么 rotate() 里面有个 Math.PI / 180 是什么鬼？

请看 参数说明:

context.rotate(angle);

angle:
旋转角度，以弧度计。
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

小编总结旋转 4个角度分别对应的参数应为：

// 0:
canvas.width = img.width;
canvas.height = img.height;
cxt.translate(0, 0);
cxt.rotate(0 * Math.PI / 180);

// ---------------

// 90:
canvas.width = img.height;
canvas.height = img.width;
cxt.translate(img.height, 0);
cxt.rotate(90 * Math.PI / 180);

// ---------------

// 180:
canvas.width = img.width;
canvas.height = img.height;
cxt.translate(img.width, img.height);
cxt.rotate(180 * Math.PI / 180);

// ---------------

// 270:
canvas.width = img.height;
canvas.height = img.width;
cxt.translate(0, img.width);
cxt.rotate(270 * Math.PI / 180);

绘制出来的是 canvas，怎么变成 图片数据呢，我们需要用：toDataURL()

canvas.toDataURL 返回的是一串 Base64 编码的 URL，当然,浏览器自己肯定支持

// 指定格式 PNG 
canvas.toDataURL("image/png"); 

// 指定格式 JPEG 
canvas.toDataURL("image/jpeg"); 

// 指定格式 JPEG 压缩 0.5 质量， 0-1 之间
canvas.toDataURL("image/jpeg", 0.5);

图片压缩前后对比，左边是压缩前，右边是压缩 0.5 后。

图片压缩体积前后大小对比，左边是压缩前，右边是压缩 0.5 后。

简化版实例代码

// 获取图片 id
var img = document.getElementById("Img");

// 创建 canvas
var canvas = document.createElement('canvas');
var new_img = document.createElement('img');

// 给 canvas 创建画板
var cxt = canvas.getContext('2d'); 

new_img.onload = function () {
  // 给画板添加宽高
  canvas.width = new_img.height;
  canvas.height = new_img.width;

  // 渲染
  cxt.translate(new_img.height, 0); //坐标
  cxt.rotate(90 * Math.PI / 180);
  cxt.drawImage(new_img, 0, 0);

  var base64 = canvas.toDataURL("image/jpeg");
  var base64_s = canvas.toDataURL("image/jpeg", 0.5);

  var img_source = new Image;
  var img_compression = new Image;

  img_source.id = "img-source";
  img_source.src = base64;

  img_compression.id = "img-compression";
  img_compression.src = base64_s;

  // 输出到页面中
  document.body.appendChild(img_source);
  document.body.appendChild(img_compression);
}

new_img.src = img.src;

jQuery 插件版

做成了个 jQuery插件，完整代码太多了，想要下载的可以到 github 上下载：

https://github.com/orzhtml/rotateImg/

---

关注 web翎云阁，定时推送，互动精彩多，若你有更好的见解，欢迎留言探讨！

本作品采用 知识共享署名 3.0 中国大陆许可协议 进行许可，分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息，否则即为侵权。

赏

谢谢你请我吃糖果