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/

本文内容均属个人原创作品，转载此文章须附上出处及原文链接。

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