前幾天，朋友要做個上傳圖片后，如何讓圖片旋轉角度，并且不影響容器或者隨著圖片大小改變容器。
先上完整實例效果圖
一開始想到的是給 img 用 css3 的`: (90deg);`
結果變成這個樣子：
角度完全偏離中心了。
手動去調整 img 的 left 和 top 也是無用，不同的圖片大小不一樣css讓圖片繞著某一點旋轉，很難把控。
如果 js 實時去調整圖片或者容器的寬高，也不現實，麻煩不說代碼一堆。
突然想到用 可以繪圖，最近剛好在研究。
// 獲取圖片 id
var img = .("Img");
// 創建
var = .('');
//給 創建畫板
var cxt = .('2d');
// 給畫板添加寬高
.width = img.width;
. = img.;
// 渲染
cxt.(img, 0, 0);
// 輸出到頁面中
.body.();
圖片繪制了，但是并沒有旋轉角度，怎么旋轉呢？
簡單介紹下`("2d")`對象屬性和方法css讓圖片繞著某一點旋轉，可用于在畫布上繪制文本、線條、矩形、圓形等等。
然后再查看下手冊 提供的方法
根據描述，以下兩個方法完全滿足我們的需求
`()` // 重新映射畫布上的 (x,y) 位置
`()` // 旋轉當前繪圖
舉個例子，一張圖片寬高為 w:100,h:300 的時候，旋轉 90° 后，寬高應為： w:300,h:100
為什么要用`()`呢，因為旋轉角度是以 x 為起點的，如果不用這個方法，繪制出來后你會看不到圖像的。
x 添加到水平坐標（x）上的值
y 添加到垂直坐標（y）上的值
根據例子，代碼應為：
cxt.(300, 0); // 坐標 x, y
cxt.(90 * Math.PI / 180);
怎么`()`里面有個`Math.PI / 180`是什么鬼？
請看參數說明:
`.(angle);`
angle:
旋轉角度，以弧度計。
如需將角度轉換為弧度，請使用 `*Math.PI/180` 公式進行計算。
舉例：如需旋轉 5 度，可規定下面的公式：`5*Math.PI/180`。
小編總結旋轉 4個角度分別對應的參數應為：
// 0:
.width = img.width;
. = img.;
cxt.(0, 0);
cxt.(0 * Math.PI / 180);
// ---------------
// 90:
.width = img.;
. = img.width;
cxt.(img., 0);
cxt.(90 * Math.PI / 180);
// ---------------
// 180:
.width = img.width;
. = img.;
cxt.(img.width, img.);
cxt.(180 * Math.PI / 180);
// ---------------
// 270:
.width = img.;
. = img.width;
cxt.(0, img.width);
cxt.(270 * Math.PI / 180);
繪制出來的是 ，怎么變成圖片數據呢，我們需要用：`()`
. 返回的是一串 編碼的 URL，當然,瀏覽器自己肯定支持
// 指定格式 PNG
.("image/png");
// 指定格式 JPEG
.("image/jpeg");
// 指定格式 JPEG 壓縮 0.5 質量， 0-1 之間
.("image/jpeg", 0.5);
圖片壓縮前后對比，左邊是壓縮前，右邊是壓縮 0.5 后。
圖片壓縮體積前后大小對比，左邊是壓縮前，右邊是壓縮 0.5 后。
簡化版實例代碼
// 獲取圖片 id
var img = .("Img");
// 創建
var = .('');
var = .('img');
// 給 創建畫板
var cxt = .('2d');
. = () {
// 給畫板添加寬高
.width = .;
. = .width;
// 渲染
cxt.(., 0); //坐標
cxt.(90 * Math.PI / 180);
cxt.(, 0, 0);
var = .("image/jpeg");
var = .("image/jpeg", 0.5);
var = new Image;
var = new Image;
.id = "img-";
.src = ;
.id = "img-";
.src = ;
// 輸出到頁面中
.body.();
.body.();
}
.src = img.src;
插件版
做成了個 插件，完整代碼太多了，想要下載的可以到 上下載：
本文內容均屬個人原創作品，轉載此文章須附上出處及原文鏈接。
加關注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！