全国服务热线:4008-888-888

技术知识

canvas学习培训和滤镜完成编码

在这个数码商品泛滥成灾的时期里,照相早已变成日常生活不能或缺的1一部分,无论是居家,踏青,還是长途旅游,总会拍1些美美的相片。但照相机立即拍出来的相片常常和大家的心理状态预期有1定的差别,那末如何减小这类差别呢?回答是美颜P图,因而各种各样美颜照相机遮天盖地而来,P图早已变成1门随身专业技能。

实际上所谓的美颜但是是许多滤镜的相互配合应用而已,而滤镜便是根据1定的优化算法来实际操作照片像素进而获得1些独特的图象实际效果。用过Photoshop的盆友都清晰ps中有1大堆的滤镜,下面大家可能用js的canvas技术性去完成几种滤镜实际效果。

近期学习培训了 HTML5 中的重头戏-- canvas 。运用 canvas,前端开发人员能够很轻轻松松地、开展图象解决。其 API 多种多样,这次关键学习培训常见的 API,而且进行下列两个编码:

  • 完成去色滤镜
  • 完成负色(反色)滤镜

1 掌握 canvas?

1.1 甚么是 canvas?

这个 HTML 元素是以便顾客端矢量图型而设计方案的。它自身沒有个人行为,但却把1个制图 API 呈现给顾客端 JavaScript 以使脚本制作可以把想绘图的物品都绘图到1块画布上。

1.2 canvas 和 svg、vml 的差别?

<canvas> 标识和 SVG 和 VML 之间的1个关键的不一样是, <canvas> 有1个根据 JavaScript 的制图 API,而 SVG 和 VML 应用1个 XML 文本文档来叙述制图。

2 canvas 制图学习培训

大多数数 Canvas 制图 API 都沒有界定在 <canvas> 元素自身上,而是界定在根据画布的 getContext() 方式得到的1个“制图自然环境”目标上。而 <canvas> 元素自身默认设置的宽高各自是 300px、150px。

2.1 canvas 绘图矩形框

// 解决canvas元素
var c = document.querySelector("#my-canvas");
c.width = 150;
c.height = 70;

// 获得 特定canvas标识 上的context目标
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000"; // 色调
ctx.fillRect(0, 0, 150, 75); // 样子

2.2 canvas 绘图相对路径

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0); // 刚开始座标
ctx.lineTo(200, 100); // 完毕座标
ctx.stroke(); // 马上绘图

2.3 canvas 绘图圆形

针对 ctx.arc() 这个插口,5 个主要参数是: (x,y,r,start,stop) 。在其中,x 和 y 是圆心座标,r 是半径。

startstop 的企业是 弧度制 。并不是长度,也并不是 °。

var c = document.querySelector("#my-canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

2.4 canvas 绘图文本

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

3 canvas 图象解决学习培训

3.1 常见 API 插口

有关图象解决的 API,关键有 4 个:

绘图图象: drawImage(img,x,y,width,height)drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

获得图象数据信息: getImageData(x,y,width,height)

重新写过图象数据信息: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

导出来图象: toDataURL([type, encoderOptions])

更详尽的 API 和主要参数表明请看: canvas 图象解决 API 主要参数解读

3.2 绘图图象

在此些 API 的基本上,大家便可以在 canvas 元素中绘图大家的照片。假定大家照片是 ./img/photo.jpg

<script>
  window.onload = function () {
    var img = new Image() // 申明新的Image目标
    img.src = "./img/photo.jpg"
    // 照片载入后
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");

      // 依据image尺寸,特定canvas尺寸
      canvas.width = img.width
      canvas.height = img.height

      // 绘图图象
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
    }
  }
</script>

以下图所示,照片被画入了 canvas:

 

4 完成滤镜

这里大家关键借用 getImageData 涵数,他回到每一个像素的 RGBA 值。依靠图象解决公式,实际操作像素开展相应的、数学课运算便可。

4.1 去色实际效果

去色实际效果非常于便是年久照相机拍出来的黑与白相片。人们依据人眼的比较敏感水平,得出了以下公式:

gray = red * 0.3 + green * 0.59 + blue * 0.11

编码以下:

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 刚开始滤镜解决
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        var gray = 0.3 * red + 0.59 * green + 0.11 * blue; // 测算gray
        // 更新RGB,留意:
        // imgData.data[i * 4 + 3]储放的是alpha,不必须修改
        imgData.data[i * 4] = gray;
        imgData.data[i * 4 + 1] = gray;
        imgData.data[i * 4 + 2] = gray;
      }
      ctx.putImageData(imgData, 0, 0); // 重新写过图象数据信息
    }
  }
</script>

实际效果以下图所示:

4.2 负色实际效果

负色实际效果便是用最大值减去当今值。而 getImageData 得到的 RGB 中的标值基础理论最大值是:255。因此,公式以下:

new_val = 255 - val

编码以下:

<script>
  window.onload = function () {
    var img = new Image()
    img.src = "./img/photo.jpg"
    img.onload = function () {
      var canvas = document.querySelector("#my-canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 刚开始滤镜解决
      var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < imgData.data.length / 4; ++i) {
        var red = imgData.data[i * 4],
          green = imgData.data[i * 4 + 1],
          blue = imgData.data[i * 4 + 2];
        // 更新RGB,留意:
        // imgData.data[i * 4 + 3]储放的是alpha,不必须修改
        imgData.data[i * 4] = 255 - imgData.data[i * 4];
        imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1];
        imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2];
      }
      ctx.putImageData(imgData, 0, 0); // 重新写过图象数据信息
    }
  }
</script>

实际效果图以下:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服