0
캔버스 이미지가 흐려지는 현상에 대해 자바 스크립트에서 약간 변경되었습니다. 하지만 어떻게 든 코드에 오류가 있습니다. 나는 그것을 찾을 수 없습니다 .. 코드는이 하나입니다 : http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js 그리고 여기에서 볼 수 있듯이, 이것은 내 요구에 맞게 변경 한 것입니다. 바라건대 내가 뭘하고 있는지 알 수 있기를 바랍니다. 나는 문제가 있지만, 브라우저 콘솔 로그를 모르는javascript 흐림 기능 오류
는 말한다 :
Uncaught TypeError: Cannot call method 'getContext' of null
그리고 라인들이 이쪽을 다스 려하고 있습니다 : 흐림 기능 모두에서
var context = canvas.getContext("2d");
RGB 또는 RGBA를 사용하는지 여부와 상관없이
이것은 내 원본 스크립트에서 링크에서 찾을 수있는 첫 번째 기능입니다. 나는 캔버스를 원하지 않기 때문에
function setBlurredImage(canvasID) {
var canvas = document.getElementById(canvasID);
var image = document.getElementById('background');
var dataURI = canvas.toDataUrl("image/png");
el.style.background = "url(" + dataURI + ")";
}
이 구성됩니다
function stackBlurImage(imgURL, canvasID, radius, blurAlphaChannel)
{
var img = new Image();
if (canvasID == "") {
canvasID = "tempCanvas";
}
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.id = canvasID;
var w = img.naturalWidth;
var h = img.naturalHeight;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
canvas.width = w;
canvas.height = h;
var context = canvas.getContext("2d");
context.clearRect(0, 0, w, h);
context.drawImage(img, 0, 0);
if (isNaN(radius) || radius < 1) return;
if (blurAlphaChannel)
stackBlurCanvasRGBA(canvasID, 0, 0, w, h, radius);
else
stackBlurCanvasRGB(canvasID, 0, 0, w, h, radius);
};
img.src = imgURL;
또한 나는이 setBlurredImage(id);을 추가하고이 기능을 만들었습니다 모두 stackBlurCanvasRGBA 및 stackBlurCanvasRGB 함수의 끝에서 그것을 언급해야한다 내 웹 페이지의 배경 이미지이기 때문에 CSS를 사용하여 배경을보다 쉽게 조작 할 수 있습니다.