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

MAX_zuo 發布于2019-08-22 16:50 / 2596人閱讀

摘要：場景解決在移動端拍照，用繪圖出現圖片逆時針旋轉度的問題。在高清屏與屏下繪圖模糊的問題。如下圖就用我老婆來做模特了下圖是拍照過后渲染在畫布上的圖片，很明顯未經處理過的圖片，逆時針旋轉了度，并且圖片很模糊。注此組件下的必須待組件初始完畢后使用。

場景

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

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

如下圖：

就用我老婆來做模特了~

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

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

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

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

示例

點擊在線預覽demo

或者掃描二維碼查看

使用方法

方法說明

通過 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地址：https://github.com/Saberization/emiya-canvas

覺得還不錯就給個 star 唄~

云服務器 GPU云服務器 iOS與安卓互通語音問題 ios模糊匹配 ios webrtc模糊問題解決

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94702.html

Canvas 在高清屏下繪制圖片變模糊的解決方法

摘要：之前我在上回答過繪制圖片模糊的問題，但是可能是由于我給出的答案過于簡略，加上答案中的鏈接已經失效，很多人反映這種辦法并不好使。前提條件假設我們要在中繪制一張的圖片，并且要保證它在高清屏中不模糊。之前我在 SF 上回答過「html5 canvas繪制圖片模糊的問題」，但是可能是由于我給出的答案過于簡略，加上答案中的 demo 鏈接已經失效，很多人反映這種辦法并不好使。但是我在給出答案之...

wind3110991 2019-08-21 10:39 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...

zhaochunqi 2019-08-01 17:43 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...

GHOST_349178 2019-08-21 16:51 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...

Galence 2019-08-30 15:53 評論0 收藏0