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

一罐寡言發表於2019-02-28
CanvasJSiOS繪圖

場景

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

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

如下圖：

就用我老婆來做模特了~

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

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

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

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

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

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

示例

點選線上預覽demo

或者掃描二維碼檢視

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

使用方法

<!-- 直接引入原始檔即可 -->
<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 唄~

相關文章