canvas马赛克

canvas操作像素

canvas操作像素，通过 ImageData 对象进行操作，对应的api 如下

//创建
const imageData = ctx.createImageData(width,height,ImageData)
//写入
ctx.putImageData(ImageData,x,y)
//获取
const imageData2 = ctx.getImageData(x,y,width,height)

ImageData 的 data 属性值，是一组一组 rgba 空间颜色组成的，每四个元素为一组

//获取指定区域的 1 个像素值
function getRGBA(x,y){
    return rgba = ctx.getImageData(x,y,1,1).data
}
//指定区域输出 1 个像素值
function setRGBA(imageData,newImageData,x,y){
    const w  = imageData.width
    const h  = imageData.height
    const tempData = newImageData.data
    tempData[y*w+x]=getRGBA(x,y)[0]
    tempData[y*w+x+1]=getRGBA(x,y)[1]
    tempData[y*w+x+2]=getRGBA(x,y)[2]
    tempData[y*w+x+3]=getRGBA(x,y)[3]
    ctx.putImageData(newImageData,x,y)
}

插入背景图

//ctx.drawImage(image,width,height)：该方法必须要等到 图片加载完成才可以执行
window.onload=function(){
    const image = new Image()
    image.src = "图片地址"
    image.onload = function(){//onload：可以用于带 src 属性的对象，用于表示对象加载完成时的动作
        ctx.drawImage(image,0,0,400,400) // 从（0，0）位置插入canvas背景，背景大小为 400 x 400
    }
}

第一步：通过单像素复制图片

效果图：

    
    
    
    
    



    
        您的浏览器不支持canvas，请更换浏览器
    
    

第二步：间隔像素取值

效果图：

    
    
    
    
    



    
        您的浏览器不支持canvas，请更换浏览器
    
    

第三步：马赛克

效果图：

    
    
    
    
    



    
        您的浏览器不支持canvas，请更换浏览器
    
    

随机获取马赛克像素

效果图

    
    
    
    
    



    
        您的浏览器不支持canvas，请更换浏览器