html5畫布背景圖像模糊和調整大小

我有一個想法使畫布背景與圖像。我想讓canvas元素成爲背景的原因是因爲我想在用戶登錄時模糊圖像，我認爲這會是一個很好的效果。而且由於我不刷新頁面，我喜歡它來模糊效果。我會在這裏有很多問題，因爲他們都依賴於對方。html5畫布背景圖像模糊和調整大小

我有2個想法如何做到這一點。第一個將有一個簡單的div標籤與背景圖像集。那麼，當用戶登錄時 - 腳本將創建一個畫布元素，將背景圖像放置在div中，然後模糊它並讓它淡入div標籤中。

另一種方法是從頭開始構建canvas元素，然後讓圖像從頭開始設置。

這是我如何製作背景圖片。

var canvas = document.getElementById('bg_canvas'); 
var context = canvas.getContext('2d'); 
var imageObj = new Image(); 

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
}; 
imageObj.src = '2.jpg';

好吧..這就是最簡單的部分。我需要一種方法來使在drawImage功能設定爲auto高度或寬度。如果寬度大於我希望高度設置爲自動的高度。我不希望圖像被拉伸到屏幕上。我應該怎麼做？

現在的問題編號爲2.當用戶調整屏幕大小時，我想調整圖像在canvas元素中的位置。模糊或不模糊。

我相信它會被設置爲這樣的事：

$(document).ready(function() { 
    winResize(); 
    $(window).resize(function() { 
     winResize()); 
    } 
}); 

function winResize() { 
    var canvas = document.getElementById('bg_canvas'); 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 

    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 

    imageObj.onload = function() { 
     context.drawImage(imageObj, 0, 0, canvas.height, canvas.width); 
    }; 
    imageObj.src = '2.jpg'; 
}

現在我還需要對圖像的高度或寬度自動機制。

我不打算要求模糊效果，因爲它應該能夠在網上找到，但是我想知道的是在模糊版本中淡入淡出時，您會推薦我做什麼。我不記得應該有一種方法在畫布元素內淡出，所以也許我必須複製已經存在的畫布，然後模糊然後淡入。

來源

2013-06-03 Dimser

有人知道嗎？ – Dimser

你只在一個小時前問過，耐心是一種美德。 –

抱歉：我只是習慣了10分鐘前回復的人.. – Dimser

加載普通圖像，使用畫布創建模糊版本的形象，然後把它轉換成一個真正的形象再次用在<img>或CSS背景：

function blurImage(imgURL) { 
    var img = new Image(); 
    img.onload = function() { 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var context = canvas.getContext("2d"); 
    context.drawImage(img,0,0); 
    /* 
     code that actually blurs the image goes here 
    */ 
    var dataURI = canvas.toDataUrl("image/png"); 
    setBlurredImage(dataURI); 
    }; 
    img.src = imgURL; 
}

了一套處理程序：

function setBlurredImage(dataURI) { 
    whateverElement.style.background = "url(" + dataURI + ")"; 
}

現在你有一個背景圖片是模糊的。

來源

2013-06-03 16:27:10

哇..其實從來沒有想過這樣..這是天才..得先嚐試一下雖然..但真的很酷.. – Dimser

+1很好用的畫布：節省創建時間，並在使用模糊時下載帶寬。如果我可以給出另一個+1以便在需要模糊的多個圖像的情況下重用。對於模糊代碼，請查看這些做得很好的javascript模糊腳本：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html – markE

你們可以提供一個帶有多種模糊的完整Jsfiddle嗎？ –

html5畫布背景圖像模糊和調整大小

回答

相關問題