keras-js-demo icon indicating copy to clipboard operation
keras-js-demo copied to clipboard

如何将canvas中的像素点转为数据?

Open JHanLu opened this issue 7 years ago • 3 comments

请问如何你是如何将280280的画布处理为2828的灰度数据的呢?

JHanLu avatar Mar 14 '18 06:03 JHanLu

https://github.com/starkwang/keras-js-demo/blob/72b4f4b3abd7cb77514938193c45cad7304ff018/src/App.vue#L134

MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData

starkwang avatar Mar 15 '18 01:03 starkwang

@starkwang 我的意思是对reduceData里的处理不是很懂,如何将280x280个数据压缩成28x28个

JHanLu avatar Mar 15 '18 01:03 JHanLu

@starkwang 我的意思是对reduceData里的处理不是很懂,如何将280x280个数据压缩成28x28个

不知道你现在有没有理解这个处理方式,贴下我的理解 下面是util中的压缩方法 `function reduceData (fullData) { // 第一段是将所有的原始点位的rgb转换为灰度值 var gray = [] for (let i = 0; i < fullData.length; i += 4) { const [R, G, B] = fullData.slice(i, i + 3) //rgb转换灰度算法网上有 gray.push((R * 299 + G * 587 + B * 114) / 1000) }

var result = [] // 循环生成需要的2828的数据 for (let y = 0; y < 28; y++) { for (let x = 0; x < 28; x++) { //因为原始尺寸是280280 所以需要缩小十倍,将每1010的区域的所有点位当成一个像素点处理,取这快区域的所有灰度平均值 const grayInArea = [] for (let tmpX = x * 10; tmpX < (x + 1) * 10; tmpX++) { for (let tmpY = y * 10; tmpY < (y + 1) * 10; tmpY++) { // 这快区域的所有点位 grayInArea.push(getGray(tmpX, tmpY)) } } // 获取这快区域所有点位灰度的平均数,当成一个像素处理 result.push(getMean(...grayInArea)) } } // 这个就是取灰度的方法,每行280个像素 所以y280 function getGray (x, y) { return gray[x + y * 280] } return result }`

chanbaihai avatar Mar 28 '23 03:03 chanbaihai