温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

用canvas实现图片滤镜效果详解之灰度效果

发布时间:2020-05-25 08:54:39 来源:网络 阅读:297 作者:ly1989124423 栏目:移动开发
  1. for ( var x = 0; x < canvasData.width; x++) {

  2. for ( var y = 0; y < canvasData.height; y++) {

  3. // Index of the pixel in the array

  4. var idx = (x + y * canvasData.width) * 4;

  5. var r = canvasData.data[idx + 0];

  6. var g = canvasData.data[idx + 1];

  7. var b = canvasData.data[idx + 2];

  8. var gray = .299 * r + .587 * g + .114 * b;

  9. // assign gray scale value

  10. canvasData.data[idx + 0] = gray; // Red channel

  11. canvasData.data[idx + 1] = gray; // Green channel

  12. canvasData.data[idx + 2] = gray; // Blue channel

  13. canvasData.data[idx + 3] = 255; // Alpha channel

  14. // 加上黑色的边框

  15. if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))

  16. {

  17. canvasData.data[idx + 0] = 0;

  18. canvasData.data[idx + 1] = 0;

  19. canvasData.data[idx + 2] = 0;

  20. }

  21. }

  22. }

3.把新的图像数据写入canvas
  1. context.putImageData(canvasData, 0, 0);

4.效果预览

点这里看预览


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI