-
1 # 杭州IT程式設計師亮亮
-
2 # 塗塗1
1.開啟方式： 第一種：開啟cmd，切換到Chorme的安裝目錄，敲入chrome.exe --enable -webgl,回車就會開啟一個chrome瀏覽器視窗； 第二種：找到Chrome瀏覽器的快捷方式，如果沒有就建立一個快捷方式（右鍵點選chrome.exe，選擇“建立快捷方式”或者“傳送到”→“桌面快捷方式”），右鍵點選快捷方式，選擇屬性。在目標框內，雙引號的後邊，加入--enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files。關閉目前開啟的所有Chrome視窗，然後用此快捷方式啟動Chrome瀏覽器。--enable-webgl 的意思是開啟WebGL支援；--ignore-gpu-blacklist的意思是忽略GPU黑名單，也就是說有一些顯示卡GPU因為過於陳舊等原因，不建議執行WebGL，這個引數可以讓瀏覽器忽略這個黑名單，強制執行WebGL；--allow-file-access-from-files的意思是允許從本地載入資源，如果你不是WebGL的開發者，不需要開發除錯WebGL，只是想要看一下WebGL的Demo，那可以不新增這個引數。 2.驗證開啟： 在位址列中輸入http://doesmybrowsersupportwebgl.com，如果顯示的是Yay，則支援WebGL,如果顯示的是Nay則不支援。
-
3 # 阿福談手機
方法一
使用 canvas 的 toDataURL 進行判斷
toDataURL方法在MDN解釋如下：
HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 。可以使用 type 引數其型別，預設為 PNG 格式。圖片的解析度為96dpi。
如果畫布的高度或寬度是0，那麼會返回字串“data:,”。
如果傳入的型別非“image/png”，但是返回的值以“data:image/png”開頭，那麼該傳入的型別是不支援的。
Chrome支援“image/webp”型別。
toDataURL方法將圖片轉化為包含dataURI的DOMString，透過 base64 編碼前面的圖片型別值是image/webp進行判斷。
比如在谷歌瀏覽器使用toDataURL方法轉成image/webp：
在 Safari 瀏覽器使用toDataURL方法轉成image/webp：
可以發現在不支援 webp 的瀏覽器進行toDataURL，得到的圖片型別並不是 webp，因此我們可以透過這個進行判斷。
實現方法：
var isSupportWebp = function () {
try {
return document.createElement("canvas").toDataURL("image/webp", 0.5).indexOf("data:image/webp") === 0;
} catch(err) {
return false;
}
}
isSupportWebp()
方法二
在服務端根據請求header資訊判斷瀏覽器是否支援webp在圖片請求發出的時候，Request Headers 裡有 Accept，服務端可以根據Accept 裡面是否有 image/webp 進行判斷。
方法三
透過載入一張 webp 圖片進行判斷
const supportsWebp = ({ createImageBitmap, Image }) => {
if (!createImageBitmap || !Image) return Promise.resolve(false);
return new Promise(resolve => {
const image = new Image();
image.onload = () => {
createImageBitmap(image)
.then(() => {
resolve(true);
})
.catch(() => {
resolve(false);
});
};
image.onerror = () => {
resolve(false);
};
image.src = "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=";
});
};
const webpIsSupported = () => {
let memo = null;
return () => {
if (!memo) {
memo = supportsWebp(window);
}
return memo;
};
};
webpIsSupported()().then(res => {
console.log("是否支援 webp", res)
}).catch(err => {
console.log(err)
})
此方法會載入一張 1x1 的白色的正方形背景圖，用來測試瀏覽器是否支援 webp。
在 Google 測試程式碼：
回覆列表
在前端繪圖中最需要關心的就是效能，一次性繪製300-400張圖不會明顯感覺到有卡頓，但是如果繪製到1k+就說不好了，至少在我的pro上是會有很明顯的卡頓表現的。繪製的數量是一方面，而如果牽涉到影象的畫素處理就更明顯了，比如高斯模糊，灰階，色調等的處理。此時就需要開啟相應的webgl支援了。下面看看前端繪圖領域的霸主fabric.js是如何判斷宿主環境是否支援webgl的。
下面看看上面的testPrecision方法:
至此，題主的問題應該解決了吧。