我想從普通影像生成模糊影像。我在互聯網上搜索并發現人們已經通過將 CSS 過濾器屬性通過 javascript 放在 Image 上使其模糊來完成它。但它可以通過檢查頁面來洗掉，我不希望這樣。
我想通過javascript生成一個模糊版本的影像。我想我可以用畫布來做，但我從來沒有用過畫布，任何幫助都將不勝感激（：
uj5u.com熱心網友回復：
所以，這取決于。如果您擔心他們使用開發人員工具將其洗掉，那么答案可能是“您不能”。
這樣做的原因是，如果你想用 JavaScript 模糊它，你需要發送未模糊的影像。而且，如果您發送未模糊的影像，即使您從未將其直接添加到 DOM，他們也可以輕松地將其從網路選項卡中取出。任何你用作 JavaScript 輸入的東西都可以被足夠聰明的用戶獲取。
如果您希望用戶永遠無法看到原始內容，而只能看到模糊的，則必須在服務器端對其進行模糊處理。
如果出于某種奇怪的原因，您對此感到滿意并且仍想在畫布中對其進行模糊處理，則您需要為畫布選擇并實作模糊演算法。有許多不同的模糊演算法可供選擇。最常見的可能是高斯模糊。
該演算法不是超級瘋狂，但也不是超級簡單，我建議改用一個庫，比如這個：glur。我沒有直接使用過那個，所以不能保證它，但它在 NPM 上每周有 50 萬次下載，所以可能相當可靠。
uj5u.com熱心網友回復：
簡單的過濾器
您可以使用ctx.filter. CanvasRenderingContext2D.filter將接受定義為字串的（有限的）過濾器。例如ctx.filter = "blur(10px)";
有關可以直接使用的過濾器集，請參見ctx.filter 。
例子
示例使用CanvasRenderingContext2D.filter隨著時間的推移模糊影像。
const img = new Image;
img.src = "https://i.stack.imgur.com/C7qq2.png?s=256&g=1";
img.addEventListener("load", () => requestAnimationFrame(uodate));
function drawImageBlur(img, blurAmount) {
const ctx = can.getContext("2d");
ctx.clearRect(0,0,128,128);
ctx.filter = "blur(" blurAmount "px)";
ctx.drawImage(img, 128 - img.naturalWidth * 0.5, 128 - img.naturalHeight * 0.5);
}
var frameCount = 0;
function uodate(time) {
if (frameCount % 10 === 0) { // no point burning CPU cycles so only once every 10 frames
drawImageBlur(img, Math.sin(time / 1000) * 5 6);
}
requestAnimationFrame(uodate);
}canvas {border: 1px solid black;}<canvas id="can" width="256" height="256"></canvas>如果您在客戶端上應用影像模糊（無論您使用什么方法），就無法保護影像不被檢查。如果要混淆（模糊）影像，則必須在服務器上完成。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/455792.html
標籤：javascript 图片 html5-画布