From f204f307156320741ff2b3d64a16e3721bb14a07 Mon Sep 17 00:00:00 2001 From: Dash <389399428@qq.com> Date: Sat, 16 Sep 2017 09:24:57 +0800 Subject: [PATCH] finish the work of day22 --- 19 - Webcam Fun/script.js | 67 +++++++++------- 22 - Follow Along Link Highlighter/README.md | 74 ++++++++++++++++++ .../effects.gif | Bin 0 -> 219008 bytes .../index-finished-Dashrun.html | 62 +++++++++++++++ .../index-start.html | 33 ++++++++ 22 - Follow Along Link Highlighter/style.css | 59 ++++++++++++++ README.md | 6 +- 7 files changed, 270 insertions(+), 31 deletions(-) create mode 100644 22 - Follow Along Link Highlighter/README.md create mode 100644 22 - Follow Along Link Highlighter/effects.gif create mode 100644 22 - Follow Along Link Highlighter/index-finished-Dashrun.html create mode 100644 22 - Follow Along Link Highlighter/index-start.html create mode 100644 22 - Follow Along Link Highlighter/style.css diff --git a/19 - Webcam Fun/script.js b/19 - Webcam Fun/script.js index 74a095d..b6f3a5a 100644 --- a/19 - Webcam Fun/script.js +++ b/19 - Webcam Fun/script.js @@ -7,46 +7,50 @@ window.onload = function() { a = document.querySelector('a'); //滤色范围记录 filter = { - rmin:0, - rmax:255, - gmin:0, - gmax:255, - bmin:0, - bmax:255 + rmin: 0, + rmax: 255, + gmin: 0, + gmax: 255, + bmin: 0, + bmax: 255 } //调用摄像头数据 - askWebcam(); + askWebcam(); //绑定change事件动态修改图片颜色 slider.onchange = function(e) { //先将canvas恢复至原始截图 - ctx.putImageData(origindata,0,0); + ctx.putImageData(origindata, 0, 0); const target = e.target; //startPos表示操作像素点数据时的起点，从canvas获取到的像素数据每四个值表示一个像素点 //例如滑块为红色，则只需要改变像素数组中第0,4,8......个元素的值。 - const startPos = {'r':0,'g':1,'b':2}[target.name[0]]; + const startPos = { + 'r': 0, + 'g': 1, + 'b': 2 + }[target.name[0]]; //filterMin和filterMax表示相应的滤色范围上下限，若修改了红色滤色范围则取红色范围值。 //若修改蓝色的滤色范围，则取蓝色。 var tempFilter = checkFilter(target.name, target.value); const filterMin = tempFilter.min; const filterMax = tempFilter.max; //从canvas获取像素数据 - var img = ctx.getImageData(0,0,300,200); + var img = ctx.getImageData(0, 0, 300, 200); - var imgd = img.data; - //色彩过滤 - for(var i=startPos, len = imgd.length; ifilterMax){ + } else if (imgd[i] > filterMax) { imgd[i] = filterMax; } - } - //将修改后的像素数据重绘制至canvas - ctx.putImageData(img,0,0); - img.src = canvas.toDataURL(); + } + //将修改后的像素数据重绘制至canvas + ctx.putImageData(img, 0, 0); + img.src = canvas.toDataURL(); } } @@ -55,7 +59,7 @@ window.onload = function() { function takePhoto() { ctx.drawImage(video, 0, 0, 300, 200); //将原始截图保存 - origindata = ctx.getImageData(0,0,300,200); + origindata = ctx.getImageData(0, 0, 300, 200); } //保存图片 @@ -67,7 +71,7 @@ function savePhoto() { //申请网络摄像头操作权限 function askWebcam() { - navigator.getUserMedia = navigator.getUserMedia || + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { @@ -92,17 +96,24 @@ function askWebcam() { } //滤色函数 -function checkFilter(name, value){ - var _min; - var _max; - var _antiname = {'rmin':'rmax','rmax':'rmin','gmin':'gmax','gmax':'gmin','bmin':'bmax','bmax':'bmin'}[name] +function checkFilter(name, value) { + var _min; + var _max; + var _antiname = { + 'rmin': 'rmax', + 'rmax': 'rmin', + 'gmin': 'gmax', + 'gmax': 'gmin', + 'bmin': 'bmax', + 'bmax': 'bmin' + }[name] filter[name] = value; //当下限值超过上限时，将两者对调 - _min = Math.min(filter[name],filter[_antiname]); - _max = Math.max(filter[name],filter[_antiname]); + _min = Math.min(filter[name], filter[_antiname]); + _max = Math.max(filter[name], filter[_antiname]); console.log(filter); return { min: _min, max: _max } -} +} \ No newline at end of file diff --git a/22 - Follow Along Link Highlighter/README.md b/22 - Follow Along Link Highlighter/README.md new file mode 100644 index 0000000..cd7a55f --- /dev/null +++ b/22 - Follow Along Link Highlighter/README.md @@ -0,0 +1,74 @@ +# 22 Follow Along Link Highliter 中文指南 + +> 本篇作者：©[大史快跑Dashrun](https://github.com/dashrun)——Chinasoft Frontend Developer + +> 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 22 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) + +> 创建时间：2017-09-12 +最后更新：2017-09-16 + +## 挑战任务 +初始文档`index-start.html`提供了一组使用`