zoukankan      html  css  js  c++  java
  • 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法。

    前面介绍的特效中灰度效果最简单,就从这里开始介绍吧。

    1.获取图像数据

     
    1. img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg’;  
    2. canvas.width  = img.width;  
    3. canvas.height = img.height;   
    4. var context = canvas.getContext(“2d”);  
    5. context.drawImage(img, 00);  
    6. var canvasData = context.getImageData(00, canvas.width, canvas.height);    

    2.通过灰度算法处理图像数据

     
    1. //  1.灰度效果  
    2. //计算公式 .299 * r + .587 * g + .114 * b;  
    3. // calculate gray scale value  
    4.  
    5.  for ( var x = 0; x < canvasData.width; x++) {  
    6.      for ( var y = 0; y < canvasData.height; y++) {  
    7.   
    8.        // Index of the pixel in the array  
    9.        var idx = (x + y * canvasData.width) * 4;  
    10.        var r = canvasData.data[idx + 0];  
    11.        var g = canvasData.data[idx + 1];  
    12.        var b = canvasData.data[idx + 2];  
    13.        var gray = .299 * r + .587 * g + .114 * b;  
    14.               
    15.         // assign gray scale value  
    16.         canvasData.data[idx + 0] = gray; // Red channel  
    17.         canvasData.data[idx + 1] = gray; // Green channel  
    18.         canvasData.data[idx + 2] = gray; // Blue channel  
    19.         canvasData.data[idx + 3] = 255// Alpha channel  
    20.         // 加上黑色的边框  
    21.         if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))   
    22.         {  
    23.           canvasData.data[idx + 0] = 0;  
    24.           canvasData.data[idx + 1] = 0;  
    25.           canvasData.data[idx + 2] = 0;  
    26.         }  
    27.      }  
    28. }  

    3.把新的图像数据写入canvas

     
    1. context.putImageData(canvasData, 00);  

    4.效果预览

    这里看预览

  • 相关阅读:
    [Leetcode]480. Sliding Window Median
    C++的一些小的知识点
    extern关键字
    c++的默认构造函数 VS 深拷贝(值拷贝) 与 浅拷贝(位拷贝)
    inline-内联函数的优点以及与宏定义的区别
    char类型输出地址
    c++ 对象的内存布局
    Shell 去掉文本中的空格
    牛客网-网易编程题 双端队列找规律
    计算机网络概观
  • 原文地址:https://www.cnblogs.com/laosan/p/image-filters-by-canvas-gray.html
Copyright © 2011-2022 走看看