From 1f3672fcc1d279aa8eb464e7aabc6fec9ae0a5e1 Mon Sep 17 00:00:00 2001 From: rocka Date: Sat, 28 Sep 2019 18:10:52 +0800 Subject: Optimize dynamic favicon for HiDPI screens (#2539) This PR leveraging `window.devicePixelRatio` to generate high resolution favicons for HiDPI screens. --- p/scripts/main.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'p') diff --git a/p/scripts/main.js b/p/scripts/main.js index 3a9d8a52a..c51d91c8e 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -1397,9 +1397,10 @@ function faviconNbUnread(n) { } //http://remysharp.com/2010/08/24/dynamic-favicons/ const canvas = document.createElement('canvas'), - link = document.getElementById('favicon').cloneNode(true); + link = document.getElementById('favicon').cloneNode(true), + ratio = window.devicePixelRatio; if (canvas.getContext && link) { - canvas.height = canvas.width = 16; + canvas.height = canvas.width = 16 * ratio; const img = document.createElement('img'); img.onload = function () { const ctx = canvas.getContext('2d'); @@ -1413,9 +1414,9 @@ function faviconNbUnread(n) { } else { text = 'E' + Math.floor(Math.log10(n)); } - ctx.font = 'bold 9px "Arial", sans-serif'; + ctx.font = 'bold ' + 9 * ratio + 'px "Arial", sans-serif'; ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; - ctx.fillRect(0, 7, ctx.measureText(text).width, 9); + ctx.fillRect(0, 7 * ratio, ctx.measureText(text).width, 9 * ratio); ctx.fillStyle = '#F00'; ctx.fillText(text, 0, canvas.height - 1); } -- cgit v1.2.3