資訊專欄INFORMATION COLUMN
摘要：之前我在上回答過(guò)繪制圖片模糊的問(wèn)題，但是可能是由于我給出的答案過(guò)于簡(jiǎn)略，加上答案中的鏈接已經(jīng)失效，很多人反映這種辦法并不好使。前提條件假設(shè)我們要在中繪制一張的圖片，并且要保證它在高清屏中不模糊。
前提條件之前我在 SF 上回答過(guò)「html5 canvas繪制圖片模糊的問(wèn)題」，但是可能是由于我給出的答案過(guò)于簡(jiǎn)略，加上答案中的 demo 鏈接已經(jīng)失效，很多人反映這種辦法并不好使。但是我在給出答案之前是在小米2 和 iPhone 上測(cè)試過(guò)的，沒(méi)有任何問(wèn)題。下面我會(huì)一步一步地描述具體的步驟。
假設(shè)我們要在 canvas 中繪制一張 300 x 90 的圖片，并且要保證它在高清屏中不模糊。那么我們首先要準(zhǔn)備一張 600 x 180 的圖片，處理過(guò)高清屏的同學(xué)應(yīng)該會(huì)有這方面的經(jīng)驗(yàn)。
問(wèn)題重現(xiàn)OK，我們先把問(wèn)題重現(xiàn)一下，以便有一個(gè)更直觀的了解。下面是相關(guān)的代碼（為了簡(jiǎn)單起見(jiàn)，我把代碼都寫(xiě)在了 HTML 文檔里面）：
代碼很簡(jiǎn)單，沒(méi)有做任何處理，具體的效果和完整的代碼可以查看這個(gè) DEMO，這個(gè) demo 在高清屏的手機(jī)中會(huì)出現(xiàn)的問(wèn)題：canvas 中的圖片變模糊了！。
至于為什么會(huì)變模糊，這和瀏覽器處理 canvas 的方式有關(guān)，相關(guān)的文章可以參考這篇 High DPI Canvas，這里不作深入介紹。
解決問(wèn)題 首先，引入 hidpi-canvas-polyfill其實(shí)，不只是繪制圖片時(shí)會(huì)出現(xiàn)模糊的問(wèn)題，正常情況下，在高清屏的設(shè)備中，任何繪制在 canvas 中的圖形（包括文字）都會(huì)出現(xiàn)模糊的問(wèn)題。上面這個(gè) polyfill 就是為了解決這個(gè)問(wèn)題，但是它沒(méi)有處理圖片。
接下來(lái)，修改繪制圖片的代碼將 init 函數(shù)修改成下面這樣：
function init() {
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
// polyfill 提供了這個(gè)方法用來(lái)獲取設(shè)備的 pixel ratio
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
var ratio = getPixelRatio(ctx);
// 注意，這里的 width 和 height 變成了 width * ratio 和 height * ratio
ctx.drawImage(document.querySelector("img"), 0, 0, 300 * ratio, 90 * ratio);
}
可以點(diǎn)擊這里查看完整的代碼和效果，在高清屏的設(shè)備中打開(kāi)，看看 cavans 中的圖片是否完美顯示。
說(shuō)明這個(gè)解決方案本質(zhì)上和 @白一梓 的答案是一樣的：先放大 canvas，再用 CSS 將其限制回原始大小。
如果你看了 polyfill 的代碼就會(huì)明白其中的原理了，這個(gè) polyfill 的代碼十分簡(jiǎn)短明了，它做了兩件事：一是將 canvas 的高和寬分別乘以 ratio 將其放大，然后又用 CSS 將高和寬限制成初始的大小；二是 hack canvas 中常用的函數(shù)，如：fillRect, clearRect, lineTo, arc 等，將它們的參數(shù)都乘以 ratio，以方便我們可以像以前那樣使用這些方法，而不用在傳參的時(shí)候手動(dòng)乘以 ratio。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85960.html
摘要：現(xiàn)在有很多微信公眾號(hào)運(yùn)營(yíng)活動(dòng)，都有生成圖片的需求，生成圖片后可以發(fā)送給好友和發(fā)到朋友圈擴(kuò)散，利于產(chǎn)品的宣傳生成圖片可以用但是由于已經(jīng)有了這個(gè)開(kāi)源庫(kù)，所以為了節(jié)省時(shí)間就沒(méi)有自己寫(xiě)了地址少啰嗦，先看東西根據(jù)獲取像素比將傳入值轉(zhuǎn)為整數(shù)繪制獲取想要 現(xiàn)在有很多微信公眾號(hào)運(yùn)營(yíng)活動(dòng)，都有生成圖片的需求，生成圖片后可以發(fā)送給好友和發(fā)到朋友圈擴(kuò)散，利于產(chǎn)品的宣傳！ 1. 生成圖片可以用canvas,但...
摘要：現(xiàn)在有很多微信公眾號(hào)運(yùn)營(yíng)活動(dòng)，都有生成圖片的需求，生成圖片后可以發(fā)送給好友和發(fā)到朋友圈擴(kuò)散，利于產(chǎn)品的宣傳生成圖片可以用但是由于已經(jīng)有了這個(gè)開(kāi)源庫(kù)，所以為了節(jié)省時(shí)間就沒(méi)有自己寫(xiě)了地址少啰嗦，先看東西根據(jù)獲取像素比將傳入值轉(zhuǎn)為整數(shù)繪制獲取想要 現(xiàn)在有很多微信公眾號(hào)運(yùn)營(yíng)活動(dòng)，都有生成圖片的需求，生成圖片后可以發(fā)送給好友和發(fā)到朋友圈擴(kuò)散，利于產(chǎn)品的宣傳！ 1. 生成圖片可以用canvas,但...
摘要：本次技術(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)目中...
閱讀 2583·2021-09-30 09:48
閱讀 2576·2019-08-30 14:10
閱讀 2714·2019-08-29 11:22
閱讀 1848·2019-08-26 13:51
閱讀 2287·2019-08-26 12:02
閱讀 2427·2019-08-23 16:06
閱讀 3562·2019-08-23 14:06
閱讀 1101·2019-08-23 13:56
