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