欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

程序员文章站 2022-04-16 11:53:24
本文实例讲述了javascript+canvas实现彩色图片转换成黑白图片的方法。分享给大家供大家参考,具体如下: 1、converttogray() 在主体代码中使用...

本文实例讲述了javascript+canvas实现彩色图片转换成黑白图片的方法。分享给大家供大家参考,具体如下:

1、converttogray()

在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawimage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getcolordata()putcolordata();最后为myimage指定彩色图片的路径。

2、getcolordata()

使用 getimagedata()将图像复制到 myimage,然后按照以下方式处理图像:在图像数据数组中移动,并收集前三个字节(红色、绿色和蓝色,忽略 alpha)的值;然后,该图像将三个字节的值相加,并将总和除以3,计算结果将舍入为一个整数,并被写入到这三个字节的值中。此值对应于颜色的色调,但灰度值从0到255,得到外观与原始彩色图片相同的黑白图片。

3、putcolordata()

putimagedata() 将已更改的图像数据写回到画布,通常用于让另一个图片执行实际处理,并仅在处理完成时显示结果。

var canvas, ctx, myimage;
function converttogray() {
  myimage = document.getelementbyid("img");
  canvas = document.getelementbyid("mycanvas");
  canvas.width = img.width;
  canvas.height = img.height;
  if (canvas.getcontext) {
    ctx = canvas.getcontext("2d");
    myimage.onload = function() {
      ctx.drawimage(myimage, 0, 0);
      getcolordata();
      putcolordata();
    }
    myimage.src = "images/img8.jpg";
  }
}
function getcolordata() {
  var length = canvas.width * canvas.height;
  myimage = ctx.getimagedata(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < length * 4; i += 4) {
    var myred = myimage.data[i];
    var mygreen = myimage.data[i + 1];
    var myblue = myimage.data[i + 2];
    mygray = parseint((myred + mygreen + myblue) / 3);
    myimage.data[i] = mygray;
    myimage.data[i + 1] = mygray;
    myimage.data[i + 2] = mygray;
  }
}
function putcolordata() {
  ctx.putimagedata(myimage, 0, 0);
}

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript+html5特效与技巧汇总》、《javascript图片操作技巧大全》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。