【DOM编程艺术】Canvas将彩色图片变成灰度图片

末蓝、 2022-01-06 06:23 204阅读 0赞

function convertToGS(img) {
      if (!Modernizr.canvas) return;
      
      img.color = img.src;
      img.grayscale = createGSCanvas(img);
      
        img.onmouseover = function() {
          this.src = this.color;
        } 
        img.onmouseout = function() {
             this.src = this.grayscale; 
         }
         
         img.onmouseout();
    } 
    
    function createGSCanvas(img) {
    
        var canvas=document.createElement("canvas");
        canvas.width=img.width;
        canvas.height=img.height;
        var ctx=canvas.getContext("2d");
        ctx.drawImage(img,0,0);
        
        var c = ctx.getImageData(0, 0, img.width, img.height); 
        for (i=0; i<c.height; i++) {
            for (j=0; j<c.width; j++) {
                var x = (i*4) * c.width + (j*4);
                var r = c.data[x]; 
                var g = c.data[x+1]; 
                var b = c.data[x+2]; 
                c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
            }
        }
        ctx.putImageData(c,0,0,0,0, c.width, c.height);
        return canvas.toDataURL();
    }
    
    window.onload = function() {
        convertToGS(document.getElementById('avatar'));
    }

注意：在从图片之类的文件中读取数据时，不同浏览器有不同的安全考虑。为了保证这个例子正常运行，必须在同一个站点中提供图片和文档。而且，就算在本地硬盘中使用file协议加载这个页面，例子也无法运行。虽然可以修改

浏览器的安全设置，但还是建议把这个例子的相关文件都上传到web服务器中。

转载于:https://www.cnblogs.com/positive/p/3688028.html

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 (轉)如何将图片变成零字节

本文轉自:http://blog.csdn.net/metababy/archive/2006/01/17/581689.aspx 注:1.目前我還不知道原理,好像根回收站有

不念不忘少年蓝@/ 2022年08月26日 01:19/ 0 赞/ 197 阅读

相关 DOM编程艺术

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

绝地灬酷狼/ 2022年07月11日 07:49/ 0 赞/ 161 阅读

相关【DOM 编程艺术】4 案例探究：JavaScript图片库

> 步骤一、创建一个链接清单 html代码： <h1>Snapshots</h1> <ul> <li> <a hre

超、凢脫俗/ 2022年06月08日 08:45/ 0 赞/ 134 阅读

相关 opencv-python将彩色图片变回灰色图片

简述就是在读取的过程中，添加一个参数（意思是，将图片作为灰色数据进行加载）代码 import cv2 image = cv2.imr

我就是我/ 2022年05月21日 11:05/ 0 赞/ 144 阅读

相关 canvas 图片灰度算法

canvas 图片灰度算法 1. 平均值 Gray = ( Red + Green + Blue ) / 3 1. 按人眼对三原色的感知度：绿》红

约定不等于承诺〃/ 2022年05月19日 12:26/ 0 赞/ 156 阅读

相关彩色rgb图片转灰度图 opencv

彩色图片转灰度图 import cv2 as cv img = cv.imread('test.jpg', 1) img

爱被打了一巴掌/ 2022年05月18日 02:49/ 0 赞/ 261 阅读

相关 vue 使用html2canvas将DOM转化为图片

一、前言我发现将DOM转化为图片是一个非常常见的需求，而自己手动转是非常麻烦的，于是找到了html2canvas这个插件，既是用得比较多的也是维护得比较好的一个插件。

Bertha 。/ 2022年04月10日 01:37/ 0 赞/ 451 阅读

相关【DOM编程艺术】Canvas将彩色图片变成灰度图片

function convertToGS(img) { if (!Modernizr.canvas) return; img.co

末蓝、/ 2022年01月06日 06:23/ 0 赞/ 205 阅读

相关【DOM编程艺术】图片库再次改进

图片库中一个图片和一段文字仅仅是为showpic脚本服务的。若能把结构和行为彻底分开那最好不过了。既然这些元素的存在只是为了让DOM方法处理它们，那么用DOM

╰+哭是因爲堅強的太久メ/ 2022年01月06日 06:19/ 0 赞/ 211 阅读

相关 CSS3如何将彩色图片转换成黑白图片？

最近到处看到有人在说[CSS][]3的filter一直没有时间自己去测试这效果。今天终于抽出时间学习这个CSS3的Filter。不整不知道呀，一整才让我感到吃惊，太强大了。大家

妖狐艹你老母/ 2021年07月26日 14:09/ 0 赞/ 388 阅读