小程序canvas放大模糊_HTML5 Canvas图像效果应用程序

小程序canvas放大模糊

HTML5 Canvas Image Effects App – Adding Blur. Today we continue HTML5 canvas examples, hope that you remember application which we made quite 2 weeks ago? Sure that this was very interesting to you to investigate image processing functions. Today I decided to continue and added new filter here – Blur.

HTML5 Canvas图像效果应用程序–添加模糊。今天，我们继续HTML5 canvas示例，希望您还记得我们在2周前制作的应用程序吗？确保这对您研究图像处理功能非常有趣。今天，我决定继续并在此处添加新的滤镜-模糊。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are all html of my demo

这是我的演示的全部html

index.html (index.html)


<!DOCTYPE html>
<html lang="en" >
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
<title>HTML5 Canvas Image Effects App - Adding Blur (demo)</title>
</head>
<body><div class="example"><h3><a href="https://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Canvas Image Effects demo (adding blur effect) | Script Tutorials</a></h3><div class="column1"><input type="button" onclick="resetToGrayscale()" value="Grayscale" /><br /><input type="button" onclick="resetToColor()" value="Color" /><br /><input type="button" onclick="resetToBlur()" value="Blur(1)" /><br /><input type="button" onclick="reset()" value="Reset" /><br /><input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br /><input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br />Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" /><input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br />Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" /><input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br />Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" /><input type="button" onclick="changeColorValue('eb', -10)" value="Less" />Blur: <input type="button" onclick="changeBlurValue(1)" value="More" /><input type="button" onclick="changeBlurValue(-1)" value="Less" /><br /></div><div class="column2"><canvas id="orig" width="500" height="333"></canvas><canvas id="panel" width="500" height="333"></canvas></div><div style="clear:both;"></div></div>
</body>
</html>


<!DOCTYPE html>
<html lang="en" >
<head>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/script.js"></script>
<title>HTML5 Canvas Image Effects App - Adding Blur (demo)</title>
</head>
<body><div class="example"><h3><a href="https://www.script-tutorials.com/html5-canvas-image-effects-app/">HTML5 Canvas Image Effects demo (adding blur effect) | Script Tutorials</a></h3><div class="column1"><input type="button" onclick="resetToGrayscale()" value="Grayscale" /><br /><input type="button" onclick="resetToColor()" value="Color" /><br /><input type="button" onclick="resetToBlur()" value="Blur(1)" /><br /><input type="button" onclick="reset()" value="Reset" /><br /><input type="button" onclick="changeGrayValue(0.1)" value="Lighter" /><br /><input type="button" onclick="changeGrayValue(-0.1)" value="Darker" /><br />Red: <input type="button" onclick="changeColorValue('er', 10)" value="More" /><input type="button" onclick="changeColorValue('er', -10)" value="Less" /><br />Green: <input type="button" onclick="changeColorValue('eg', 10)" value="More" /><input type="button" onclick="changeColorValue('eg', -10)" value="Less" /><br />Blue: <input type="button" onclick="changeColorValue('eb', 10)" value="More" /><input type="button" onclick="changeColorValue('eb', -10)" value="Less" />Blur: <input type="button" onclick="changeBlurValue(1)" value="More" /><input type="button" onclick="changeBlurValue(-1)" value="Less" /><br /></div><div class="column2"><canvas id="orig" width="500" height="333"></canvas><canvas id="panel" width="500" height="333"></canvas></div><div style="clear:both;"></div></div>
</body>
</html>

Make attention, that since today I made 2 canvas objects. First one will contain original image – second one – our effects. Also I added 3 new buttons. First – to switch to Blur effect, next 2 – increase / decrease blur level.

注意，从今天开始，我制作了2个画布对象。第一个将包含原始图像，第二个将包含我们的效果。我还添加了3个新按钮。首先-切换到模糊效果，然后2-增大/减小模糊级别。

步骤2. CSS (Step 2. CSS)

Here are used CSS styles.

这是使用CSS样式。

css / main.css (css/main.css)


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:730px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center;
}
.column1 {float:left;padding-right: 10px;text-align:right;width:185px;
}
.column2 {float:left;width:500px;background-color:#888;padding:10px;
}
input[type=button] {margin:5px;
}


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:730px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center;
}
.column1 {float:left;padding-right: 10px;text-align:right;width:185px;
}
.column2 {float:left;width:500px;background-color:#888;padding:10px;
}
input[type=button] {margin:5px;
}

步骤3. JS (Step 3. JS)

Now – most interesting – its inner functionality (HTML5 canvas script).

现在，最有趣的是它的内部功能(HTML5画布脚本)。

js / script.js (js/script.js)


var canvas;
var context;
var iW = 0; // image width
var iH = 0; // image height
var p1 = 0.99;
var p2 = 0.99;
var p3 = 0.99;
var er = 0; // extra red
var eg = 0; // extra green
var eb = 0; // extra blue
var iBlurRate = 0;
var func = 'color'; // last used function
window.onload = function() {// creating context for original imagecanvasOrig = document.getElementById('orig');contextOrig = canvasOrig.getContext('2d');// draing original imagevar imgObj = new Image();imgObj.onload = function () {iW = this.width;iH = this.height;contextOrig.drawImage(imgObj, 0, 0, iW, iH); // draw the image on the canvas}imgObj.src = 'images/01.jpg';// creating testing contextcanvas = document.getElementById('panel');context = canvas.getContext('2d');
};
function Grayscale() {func = 'grayscale'; // last used functionvar imgd = contextOrig.getImageData(0, 0, iW, iH);var data = imgd.data;for (var i = 0, n = data.length; i < n; i += 4) {var grayscale = data[i] * p1 + data[i+1] * p2 + data[i+2] * p3;data[i]   = grayscale + er; // reddata[i+1] = grayscale + eg; // greendata[i+2] = grayscale + eb; // blue}context.putImageData(imgd, 0, 0);
}
function Color() {func = 'color'; // last used functionvar imgd = contextOrig.getImageData(0, 0, iW, iH);var data = imgd.data;for (var i = 0, n = data.length; i < n; i += 4) {data[i]   = data[i]*p1+er; // reddata[i+1] = data[i+1]*p2+eg; // greendata[i+2] = data[i+2]*p3+eb; // blue}context.putImageData(imgd, 0, 0);
}
function Blur() {func = 'blur'; // last used functionvar imgd = contextOrig.getImageData(0, 0, iW, iH);var data = imgd.data;for (br = 0; br < iBlurRate; br += 1) {for (var i = 0, n = data.length; i < n; i += 4) {iMW = 4 * iW;iSumOpacity = iSumRed = iSumGreen = iSumBlue = 0;iCnt = 0;// data of close pixels (from all 8 surrounding pixels)aCloseData = [i - iMW - 4, i - iMW, i - iMW + 4, // top pixelsi - 4, i + 4, // middle pixelsi + iMW - 4, i + iMW, i + iMW + 4 // bottom pixels];// calculating Sum value of all close pixelsfor (e = 0; e < aCloseData.length; e += 1) {if (aCloseData[e] >= 0 && aCloseData[e] <= data.length - 3) {iSumOpacity += data[aCloseData[e]];iSumRed += data[aCloseData[e] + 1];iSumGreen += data[aCloseData[e] + 2];iSumBlue += data[aCloseData[e] + 3];iCnt += 1;}}// apply average valuesdata[i] = (iSumOpacity / iCnt)*p1+er;data[i+1] = (iSumRed / iCnt)*p2+eg;data[i+2] = (iSumGreen / iCnt)*p3+eb;data[i+3] = (iSumBlue / iCnt);}}context.putImageData(imgd, 0, 0);
}
function reset() {switch(func) {case 'grayscale': resetToGrayscale(); break;case 'color': resetToColor(); break;case 'blur': resetToBlur(); break;}
}
function changeGrayValue(val) {p1 += val;p2 += val;p3 += val;switch(func) {case 'grayscale': Grayscale(); break;case 'color': Color(); break;case 'blur': Blur(); break;}
}
function changeColorValue(sobj, val) {switch (sobj) {case 'er': er += val; break;case 'eg': eg += val; break;case 'eb': eb += val; break;}switch(func) {case 'grayscale': Grayscale(); break;case 'color': Color(); break;case 'blur': Blur(); break;}
}
function changeBlurValue(val) {iBlurRate += val;if (iBlurRate <= 0) Color();if (iBlurRate > 4) iBlurRate = 4;Blur();
}
function resetToColor() {p1 = 1;p2 = 1;p3 = 1;er = eg = eb = 0;iBlurRate = 0;Color();
}
function resetToBlur() {p1 = 1;p2 = 1;p3 = 1;er = eg = eb = 0;iBlurRate = 1;Blur();
}
function resetToGrayscale() {p1 = 0.3;p2 = 0.59;p3 = 0.11;er = eg = eb = 0;iBlurRate = 0;Grayscale();
}


var canvas;
var context;
var iW = 0; // image width
var iH = 0; // image height
var p1 = 0.99;
var p2 = 0.99;
var p3 = 0.99;
var er = 0; // extra red
var eg = 0; // extra green
var eb = 0; // extra blue
var iBlurRate = 0;
var func = 'color'; // last used function
window.onload = function() {// creating context for original imagecanvasOrig = document.getElementById('orig');contextOrig = canvasOrig.getContext('2d');// draing original imagevar imgObj = new Image();imgObj.onload = function () {iW = this.width;iH = this.height;contextOrig.drawImage(imgObj, 0, 0, iW, iH); // draw the image on the canvas}imgObj.src = 'images/01.jpg';// creating testing contextcanvas = document.getElementById('panel');context = canvas.getContext('2d');
};
function Grayscale() {func = 'grayscale'; // last used functionvar imgd = contextOrig.getImageData(0, 0, iW, iH);var data = imgd.data;for (var i = 0, n = data.length; i < n; i += 4) {var grayscale = data[i] * p1 + data[i+1] * p2 + data[i+2] * p3;data[i]   = grayscale + er; // reddata[i+1] = grayscale + eg; // greendata[i+2] = grayscale + eb; // blue}context.putImageData(imgd, 0, 0);
}
function Color() {func = 'color'; // last used functionvar imgd = contextOrig.getImageData(0, 0, iW, iH);var data = imgd.data;for (var i = 0, n = data.length; i < n; i += 4) {data[i]   = data[i]*p1+er; // reddata[i+1] = data[i+1]*p2+eg; // greendata[i+2] = data[i+2]*p3+eb; // blue}context.putImageData(imgd, 0, 0);
}
function Blur() {func = 'blur'; // last used functionvar imgd = contextOrig.getImageData(0, 0, iW, iH);var data = imgd.data;for (br = 0; br < iBlurRate; br += 1) {for (var i = 0, n = data.length; i < n; i += 4) {iMW = 4 * iW;iSumOpacity = iSumRed = iSumGreen = iSumBlue = 0;iCnt = 0;// data of close pixels (from all 8 surrounding pixels)aCloseData = [i - iMW - 4, i - iMW, i - iMW + 4, // top pixelsi - 4, i + 4, // middle pixelsi + iMW - 4, i + iMW, i + iMW + 4 // bottom pixels];// calculating Sum value of all close pixelsfor (e = 0; e < aCloseData.length; e += 1) {if (aCloseData[e] >= 0 && aCloseData[e] <= data.length - 3) {iSumOpacity += data[aCloseData[e]];iSumRed += data[aCloseData[e] + 1];iSumGreen += data[aCloseData[e] + 2];iSumBlue += data[aCloseData[e] + 3];iCnt += 1;}}// apply average valuesdata[i] = (iSumOpacity / iCnt)*p1+er;data[i+1] = (iSumRed / iCnt)*p2+eg;data[i+2] = (iSumGreen / iCnt)*p3+eb;data[i+3] = (iSumBlue / iCnt);}}context.putImageData(imgd, 0, 0);
}
function reset() {switch(func) {case 'grayscale': resetToGrayscale(); break;case 'color': resetToColor(); break;case 'blur': resetToBlur(); break;}
}
function changeGrayValue(val) {p1 += val;p2 += val;p3 += val;switch(func) {case 'grayscale': Grayscale(); break;case 'color': Color(); break;case 'blur': Blur(); break;}
}
function changeColorValue(sobj, val) {switch (sobj) {case 'er': er += val; break;case 'eg': eg += val; break;case 'eb': eb += val; break;}switch(func) {case 'grayscale': Grayscale(); break;case 'color': Color(); break;case 'blur': Blur(); break;}
}
function changeBlurValue(val) {iBlurRate += val;if (iBlurRate <= 0) Color();if (iBlurRate > 4) iBlurRate = 4;Blur();
}
function resetToColor() {p1 = 1;p2 = 1;p3 = 1;er = eg = eb = 0;iBlurRate = 0;Color();
}
function resetToBlur() {p1 = 1;p2 = 1;p3 = 1;er = eg = eb = 0;iBlurRate = 1;Blur();
}
function resetToGrayscale() {p1 = 0.3;p2 = 0.59;p3 = 0.11;er = eg = eb = 0;iBlurRate = 0;Grayscale();
}

As you can notice – sources slightly changed. Now we have 2 canvas objects, so we will using ‘getImageData’ function only with first canvas with original image. Also I added new functions for Blur effect. So how I Blurring image? – commonly, I passing through all pixels of image, taking 8 surrounding pixels of each pixels, calculating average opacity, red/green/blue values of these 8 pixels, and then, apply that average calculated value to our enum pixel.

如您所见-来源略有变化。现在我们有2个画布对象，因此我们仅对具有原始图像的第一个画布使用'getImageData'函数。另外，我还添加了用于模糊效果的新功能。那么我如何模糊图像呢？ –通常，我遍历图像的所有像素，获取每个像素的8个周围像素，计算这8个像素的平均不透明度，红色/绿色/蓝色值，然后将该平均计算值应用于枚举像素。

现场演示

结论 (Conclusion)

Not bad, isn’t it? Today we added new interesting effect to our application – Blur. I hope that in coming articles we will continue lessons for image processing. I will be glad to see your thanks and comments. Good luck!

还不错，不是吗？今天，我们在应用程序中添加了新的有趣效果-模糊。我希望在以后的文章中，我们将继续进行图像处理课程。看到您的感谢和评论，我将非常高兴。祝好运！

翻译自: https://www.script-tutorials.com/html5-canvas-image-effects-app-adding-blur/

小程序canvas放大模糊