canvas中getImageData改变大小及颜色

关于 getImageData

ctx.getImageData()，可以获取 canvas 的 data 图片数据，这个图片数据返回的 data 是一个对象，该对象包含指定的 ImageData 对象的图像数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

color/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中。

ImageData.datalength 可以作这样计算：300（width）X 150(height) X 4（r,g，b，a 4 个分量）= 180000

关于 getImageData，我之前文章也有写过 https://www.haorooms.com/post/canvas_imageData
里面有利用 getImageData，过滤视频纯色背景，吸取视频颜色，防锯齿，图片灰色及反色，图片下载等

今天在这个基础上再补充一些，主要是封装成函数，更方便调用，之前主要是 demo 案例，大家可以看看这些 demo 案例 https://www.haorooms.com/post/canvas_imageData

canvas 应用补充

之前文章有写过，今天补充一下。

两个 canvas 画布

var canvasa = document.getElementById("canvasa")
var contexta = canvasa.getContext("2d")

var canvasb = document.getElementById("canvasb")
var contextb = canvasb.getContext("2d")

灰色效果

function greyEffect(){var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height)
    var pixelData = imageData.data
    for(var i = 0 ; i 

黑白效果

function blackEffect(){var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height)
    var pixelData = imageData.data
    for(var i = 0 ; i  125){pv = 255}
        else{pv = 0}

        pixelData[i*4+0] = pv
        pixelData[i*4+1] = pv
        pixelData[i*4+2] = pv
    }
    contextb.putImageData(imageData , 0 , 0 , 0 , 0 , canvasa.width , canvasa.height)
}

反色

function reverseEffect(){var imageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height)
    var pixelData = imageData.data
    for(var i = 0 ; i 

模糊

function blurEffect(){var tmpImageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height)
    var tmpPixelData = tmpImageData.data

    var imageData = contexta.getImageData(0 , 0 , canvasa.width , canvasa.height)
    var pixelData = imageData.data

    var blurR = 3
    var totalnum = (2*blurR + 1)*(2*blurR + 1)

    for(var i = blurR ; i 

马赛克

function mosaicEffect(){var tmpImageData = contexta.getImageData( 0 , 0 , canvasa.width , canvasa.height)
    var tmpPixelData = tmpImageData.data

    var imageData = contexta.getImageData(0 , 0 , canvasa.width , canvasa.height)
    var pixelData = imageData.data

    var size = 16
    var totalnum = size*size
    for(var i = 0 ; i 

常用遍历方法：

let imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT).data;
// 找到画布像素中的有色位置 index
// 第一行第一列 width * 4 
// 第二行第二列
// ......
for(var y = 0; y  0) {// console.log('idx+++:', idx)
           // some code ......
        } else{
            // 表示小于 0 或等于 0 的情况
            // some other code ......
            // console.log('idx---:', imgData[idx])
        }
    }
}

Canvas 中对 ImageData 数据缩放

// imageData 要改版的数据，scale 是缩放的尺寸，outCtx 是输出的 canvas ctx

  function scaleImageData(imageData, scale, outCtx) {var scaled = outCtx.createImageData(imageData.width * scale, imageData.height * scale)
    for (var row = 0; row 

小结

温故而知新，之前的总结比较笼统，今天再次总结一下，比较使用的方法，可以直接项目中使用。比较方便。