利用canvas的getimageData和putimageData进行图像处理

最新推荐文章于 2024-06-14 17:10:51 发布

no bug no life

最新推荐文章于 2024-06-14 17:10:51 发布

阅读量1.4w

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51364599/article/details/110791133

版权

canvas ImageData代码总览<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo

摘要由CSDN通过智能技术生成

canvas ImageData

代码总览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="wrap0" width="754" height="535" style="border:#000 1px solid;"></canvas>
    <canvas id="wrap" width="754" height="535" style="border:#000 1px solid;"></canvas>
    <canvas id="wrap2" width="754" height="535" style="border:#000 1px solid;"></canvas>
    <canvas id="wrap3" width="754" height="535" style="border:#000 1px solid;"></canvas>
    <canvas id="wrap4" width="754" height="535" style="border:#000 1px solid;"></canvas>
</body>
<script>
    let cav0 = document.getElementById('wrap0')
    let cav = document.getElementById('wrap')
    let cav2 = document.getElementById('wrap2')
    let cav3 = document.getElementById('wrap3')
    let cav4 = document.getElementById('wrap4')
    let ctx0 = cav0.getContext("2d")
    let ctx = cav.getContext("2d")
    let ctx2 = cav2.getContext("2d")
    let ctx3 = cav3.getContext("2d")
    let ctx4 = cav4.getContext("2d")
    let img = new Image()
    img.src = "cxk.jpg"
    img.onload = function(){
   
        ctx0.drawImage(img,0,0)
        //转base64
        let base64Img = new Image()
        base64Img.src = cav0.toDataURL()
        document.body.append(base64Img)

        cav0.toBlob((blob)=>{
   
            console.log(blob.slice(0,blob.size))
            console.log(blob)
        })
        //图片反相
        let newImageData = ctx0.getImageData(0,0,754,535)
        for(let i=0;i<newImageData.data.length;i+=4){
   
            newImageData.data[i] = 255 - newImageData.data[i]
            newImageData.data[i+1] = 255 - newImageData.data[i+1]
            newImageData.data[i+2] = 255 - newImageData.data[i+2]
            newImageData.data[i+3] = 255 
        }
        ctx.putImageData(newImageData,0,0)
        //图片黑白 Gray = 0.2989 * R + 0.5870 * G + 0.1140 * B
        let newImageDataTwo = ctx0.getImageData(0,0,754,535)
        
        for(let i=0;i<newImageDataTwo.data.length;i+=4){
   
            let gray = 0.2989 * newImageDataTwo.data[i] + 0.587 * newImageDataTwo.data[i+1] + 0.114 * newImageDataTwo.data[i+2]
            newImageDataTwo.data[i] =  gray
            newImageDataTwo.data[i+1] =  gray
            newImageDataTwo.data[i+2] =  gray
            newImageDataTwo.data[i+3] = 255 
        }
        ctx2.putImageData(newImageDataTwo,0,0)
        //高斯模糊
        let newImageDataThree = ctx0.getImageData(0,0,754,535)
        newImageDataThree = blur(newImageDataThree,10,6)
        ctx3.putImageData(newImageDataThree,0,0)
        //马赛克
        let newIma

最低0.47元/天解锁文章

no bug no life

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
利用canvas的getimageData和putimageData进行图像处理

canvas ImageData代码总览<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo
复制链接

扫一扫