emiya-canvas.js 解決ios下拍照傾斜與canvas高清屏下繪圖模糊問題

場景

解決在移動端拍照，用 canvas 繪圖出現圖片逆時針旋轉 90 度的問題。

canvas 在高清屏與retina屏下繪圖模糊的問題。

以下圖：

就用我老婆來作模特了~

下圖是拍照事後渲染在畫布上的圖片，很明顯未經處理過的圖片，逆時針旋轉了 90 度，而且圖片很模糊。

經過使用 emiya-canvas.js 處理事後的圖片，修正了正確的圖片方向，而且圖片也變得清晰了。

在來一張是從相冊選擇的圖片來看一下：

未修正的圖片很模糊，修正事後的圖片就清晰了許多。

示例

點擊在線預覽demo

或者掃描二維碼查看

使用方法

<!-- 直接引入源文件便可 -->
<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 唄~