場景
解決在移動端拍照,用 canvas
繪圖出現圖片逆時針旋轉 90
度的問題。
canvas
在高清屏與retina屏下繪圖模糊的問題。
如下圖:
就用我老婆來做模特了~
下圖是拍照過後渲染在畫布上的圖片,很明顯未經處理過的圖片,逆時針旋轉了 90
度,並且圖片很模糊。
通過使用 emiya-canvas.js
處理過後的圖片,修正了正確的圖片方向,並且圖片也變得清晰了。
在來一張是從相簿選擇的圖片來看一下:
未修正的圖片很模糊,修正過後的圖片就清晰了許多。
示例
或者掃描二維碼檢視
使用方法
<!-- 直接引入原始檔即可 -->
<script src="emiya-canvas.js"></script>
複製程式碼
方法說明
通過 new
建立一個 EmiyaCanvas
的例項,建立過程當中做了一些初始化元件的操作。
const emiyaInstacne = new EmiyaCanvas();
複製程式碼
注:此元件下的 API
必須待元件初始完畢後使用。
setFile(file)
設定圖片檔案物件
emiyaInstacne.setFile(file);
複製程式碼
引數說明
引數 | 引數型別 | 說明 |
---|---|---|
file | Object | 必選 檔案物件 |
render(canvas, options, callback)
渲染 canvas
emiyaInstacne.render(canvasEl, {
width: 300,
quality: .8
}, function(response) {
console.log(response);
});
複製程式碼
response 返回格式如下:
{
base64: ``, // 修正過後圖片的 base64 值
width: 300, // 畫布寬度
height: 300 // 畫布高度
}
複製程式碼
引數說明
引數 | 引數型別 | 說明 |
---|---|---|
canvasEl | HTMLElement | 必選 需要渲染的canvas元素 |
options | Object | 必選 設定畫布的一些引數 width 畫布寬度 quality 圖片質量,範圍在 0 - 1 之間,預設值為 0.8 |
callback | Function | 可選 回撥函式,返回了圖片的 base64 值,與一些 canvas 的引數 |
github地址:github.com/Saberizatio…
覺得還不錯就給個 star
唄~