資訊專欄INFORMATION COLUMN
摘要：場景解決在移動端拍照，用繪圖出現(xiàn)圖片逆時針旋轉(zhuǎn)度的問題。在高清屏與屏下繪圖模糊的問題。如下圖就用我老婆來做模特了下圖是拍照過后渲染在畫布上的圖片，很明顯未經(jīng)處理過的圖片，逆時針旋轉(zhuǎn)了度，并且圖片很模糊。注此組件下的必須待組件初始完畢后使用。
場景
解決在移動端拍照，用 canvas 繪圖出現(xiàn)圖片逆時針旋轉(zhuǎn) 90 度的問題。
canvas 在高清屏與retina屏下繪圖模糊的問題。
如下圖：
就用我老婆來做模特了~
下圖是拍照過后渲染在畫布上的圖片，很明顯未經(jīng)處理過的圖片，逆時針旋轉(zhuǎn)了 90 度，并且圖片很模糊。
通過使用 emiya-canvas.js 處理過后的圖片，修正了正確的圖片方向，并且圖片也變得清晰了。
在來一張是從相冊選擇的圖片來看一下：
未修正的圖片很模糊，修正過后的圖片就清晰了許多。
示例點擊在線預(yù)覽demo
或者掃描二維碼查看
使用方法方法說明
通過 new 創(chuàng)建一個 EmiyaCanvas 的實例，創(chuàng)建過程當中做了一些初始化組件的操作。
const emiyaInstacne = new EmiyaCanvas();
注：此組件下的 API 必須待組件初始完畢后使用。
setFile(file)設(shè)置圖片文件對象
emiyaInstacne.setFile(file);
參數(shù)說明
| 參數(shù) | 參數(shù)類型 | 說明 |
|---|---|---|
| file | Object | 必選 文件對象 |
渲染 canvas
emiyaInstacne.render(canvasEl, {
width: 300,
quality: .8
}, function(response) {
console.log(response);
});
response 返回格式如下：
{
base64: "", // 修正過后圖片的 base64 值
width: 300, // 畫布寬度
height: 300 // 畫布高度
}
參數(shù)說明
| 參數(shù) | 參數(shù)類型 | 說明 |
|---|---|---|
| canvasEl | HTMLElement | 必選 需要渲染的canvas元素 |
| options | Object | 必選 設(shè)置畫布的一些參數(shù) width 畫布寬度 quality 圖片質(zhì)量，范圍在 0 - 1 之間，默認值為 0.8 |
| callback | Function | 可選 回調(diào)函數(shù)，返回了圖片的 base64 值，與一些 canvas 的參數(shù) |
覺得還不錯就給個 star 唄~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94702.html
摘要：之前我在上回答過繪制圖片模糊的問題，但是可能是由于我給出的答案過于簡略，加上答案中的鏈接已經(jīng)失效，很多人反映這種辦法并不好使。前提條件假設(shè)我們要在中繪制一張的圖片，并且要保證它在高清屏中不模糊。 之前我在 SF 上回答過「html5 canvas繪制圖片模糊的問題」，但是可能是由于我給出的答案過于簡略，加上答案中的 demo 鏈接已經(jīng)失效，很多人反映這種辦法并不好使。但是我在給出答案之...
摘要：本次技術(shù)調(diào)研來源于項目中的一個重要功能需求實現(xiàn)微信長按網(wǎng)頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項目中的一個重要功能需求：實現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網(wǎng)頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結(jié)尾頁分享。以下則是項目中...
摘要：本次技術(shù)調(diào)研來源于項目中的一個重要功能需求實現(xiàn)微信長按網(wǎng)頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項目中的一個重要功能需求：實現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網(wǎng)頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結(jié)尾頁分享。以下則是項目中...
摘要：本次技術(shù)調(diào)研來源于項目中的一個重要功能需求實現(xiàn)微信長按網(wǎng)頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項目中的一個重要功能需求：實現(xiàn)微信長按網(wǎng)頁保存為截圖。 這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界 將整個網(wǎng)頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結(jié)尾頁分享。以下則是項目中...
閱讀 3557·2021-11-23 10:10
閱讀 3327·2019-08-30 14:03
閱讀 2080·2019-08-30 13:09
閱讀 3411·2019-08-29 15:29
閱讀 1554·2019-08-29 11:23
閱讀 2022·2019-08-28 18:28
閱讀 2857·2019-08-26 13:34
閱讀 2179·2019-08-26 11:32
