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

wind3110991 發布于2019-08-21 10:39 / 3512人閱讀

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

之前我在 SF 上回答過「html5 canvas繪制圖片模糊的問題」，但是可能是由于我給出的答案過于簡略，加上答案中的 demo 鏈接已經失效，很多人反映這種辦法并不好使。但是我在給出答案之前是在小米2 和 iPhone 上測試過的，沒有任何問題。下面我會一步一步地描述具體的步驟。

前提條件

假設我們要在 canvas 中繪制一張 300 x 90 的圖片，并且要保證它在高清屏中不模糊。那么我們首先要準備一張 600 x 180 的圖片，處理過高清屏的同學應該會有這方面的經驗。

問題重現

OK，我們先把問題重現一下，以便有一個更直觀的了解。下面是相關的代碼（為了簡單起見，我把代碼都寫在了 HTML 文檔里面）：

代碼很簡單，沒有做任何處理，具體的效果和完整的代碼可以查看這個 DEMO，這個 demo 在高清屏的手機中會出現的問題：canvas 中的圖片變模糊了！。

至于為什么會變模糊，這和瀏覽器處理 canvas 的方式有關，相關的文章可以參考這篇 High DPI Canvas，這里不作深入介紹。

解決問題 首先，引入 hidpi-canvas-polyfill

其實，不只是繪制圖片時會出現模糊的問題，正常情況下，在高清屏的設備中，任何繪制在 canvas 中的圖形（包括文字）都會出現模糊的問題。上面這個 polyfill 就是為了解決這個問題，但是它沒有處理圖片。

接下來，修改繪制圖片的代碼

將 init 函數修改成下面這樣：

function init() {
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    // polyfill 提供了這個方法用來獲取設備的 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);
}

可以點擊這里查看完整的代碼和效果，在高清屏的設備中打開，看看 cavans 中的圖片是否完美顯示。

說明

這個解決方案本質上和 @白一梓的答案是一樣的：先放大 canvas，再用 CSS 將其限制回原始大小。

如果你看了 polyfill 的代碼就會明白其中的原理了，這個 polyfill 的代碼十分簡短明了，它做了兩件事：一是將 canvas 的高和寬分別乘以 ratio 將其放大，然后又用 CSS 將高和寬限制成初始的大小；二是 hack canvas 中常用的函數，如：fillRect, clearRect, lineTo, arc 等，將它們的參數都乘以 ratio，以方便我們可以像以前那樣使用這些方法，而不用在傳參的時候手動乘以 ratio。

GPU云服務器云服務器的解決方法解決問題的方法 failed的解決方法解決數據分析的方法

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

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

移動端H5頁面生成圖片解決方案

摘要：現在有很多微信公眾號運營活動，都有生成圖片的需求，生成圖片后可以發送給好友和發到朋友圈擴散，利于產品的宣傳生成圖片可以用但是由于已經有了這個開源庫，所以為了節省時間就沒有自己寫了地址少啰嗦，先看東西根據獲取像素比將傳入值轉為整數繪制獲取想要現在有很多微信公眾號運營活動，都有生成圖片的需求，生成圖片后可以發送給好友和發到朋友圈擴散，利于產品的宣傳！ 1. 生成圖片可以用canvas,但...

sewerganger 2019-08-29 16:19 評論0 收藏0
移動端H5頁面生成圖片解決方案

摘要：現在有很多微信公眾號運營活動，都有生成圖片的需求，生成圖片后可以發送給好友和發到朋友圈擴散，利于產品的宣傳生成圖片可以用但是由于已經有了這個開源庫，所以為了節省時間就沒有自己寫了地址少啰嗦，先看東西根據獲取像素比將傳入值轉為整數繪制獲取想要現在有很多微信公眾號運營活動，都有生成圖片的需求，生成圖片后可以發送給好友和發到朋友圈擴散，利于產品的宣傳！ 1. 生成圖片可以用canvas,但...

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

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

zhaochunqi 2019-08-01 17:43 評論0 收藏0