canvas 图片灰度算法

约定不等于承诺〃 2022-05-19 12:26 161阅读 0赞

# canvas 图片灰度算法 #

1.  平均值

Gray = ( Red + Green + Blue ) / 3

1.  按人眼对三原色的感知度 ： 绿 》 红 》 蓝

Gray = ( Red * 0.3 + Green * 0.59 + Blue * 0,11 )

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图片灰度化</title>
        <style> </style>
    </head>
    <body>
        <img src="./images/gift.png" alt="">
        <canvas class="cvs"></canvas>
        <script> var img = new Image(); var imgWidth, imgHeight; var cvs = document.getElementsByClassName('cvs')[0] var ctx = cvs.getContext('2d'); // console.log(ctx) img.src = './images/gift.png' img.onload = function(){ imgHeight = this.naturalHeight ; imgWidth = this.naturalWidth ; cvs.height = 2* imgHeight; cvs.width = 2 * imgWidth; ctx.drawImage(this,0,0,this.naturalWidth,this.naturalHeight) var imgData = ctx.getImageData(0,0,imgWidth,imgHeight) console.log(imgData) //灰度计算，用的第二种 var data = imgData.data; var len = data.length; for(let i=0;i<len; i+=4){ let gray = 0.3 * data[i] + .59 * data[i+1] + .11 * data[i+2] data[i]=data[i+1]=data[i+2] = gray } console.log(imgData) ctx.putImageData(imgData,imgWidth,0,0,0,imgWidth,imgHeight) // 将图片数据写进画布 ctx.putImageData(imgData,0,imgHeight,101,101,imgWidth/2,imgHeight/2) // 将图片数据写进画布 //截取图片 ctx.putImageData(imgData,imgWidth-101,imgHeight-101,101,101,imgWidth/2,imgHeight/2) // 将图片数据写进画布 //截取图片 } </script>
    </body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 canvas图片画圆角

获取屏幕比率有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大，一遍是一倍或者两倍 var getPixelRatio = function(context)

冷不防/ 2023年01月11日 08:52/ 0 赞/ 225 阅读

相关 canvas实现放大镜查看图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

忘是亡心i/ 2022年06月14日 03:19/ 0 赞/ 232 阅读

相关 HTML5 Canvas 开发绘图方法整理【六、canvas image /canvas绘制图片、平铺图片】

绘制图片目前有三种调用的方式： 1、ctx.drawImage(image,dx,dy); //image 是要显示的图片 dx与 dy 是图片左上角的横坐标与纵坐标

喜欢ヅ旅行/ 2022年05月31日 09:05/ 0 赞/ 599 阅读

相关 canvas画圆形图片

效果图： ![70][] 实现环境在微信小程序中参考网站[https://www.jianshu.com/p/9a6ee2648d6f][https_www.ji

谁践踏了优雅/ 2022年05月26日 12:36/ 0 赞/ 224 阅读

相关 canvas 图片灰度算法

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

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

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

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

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

相关 Canvas 插入图片

最初想用w3c上面的方法： [http://www.w3school.com.cn/tiy/t.asp?f=html5\_canvas\_image][http_www.w3

超、凢脫俗/ 2022年03月31日 04:48/ 0 赞/ 233 阅读

相关图片转字符画&图片转灰度图

import java.awt.image.BufferedImage; import java.io.BufferedOutputStream; im

淩亂°似流年/ 2022年03月26日 02:12/ 0 赞/ 221 阅读

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

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

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

相关 canvas 图片绘制、视频绘制

canvas 1.canvas中绘制图片: img对象.onload=function(){ bi.drawImage

た入场券/ 2021年07月24日 11:36/ 0 赞/ 517 阅读