从0开始的canvas学习(一)

从0开始的canvas学习(二)

延续之前将图片或者视频绘制到画布上的方法之后

现在假如我们要将视频或者图片处理处理成一些自己想要的效果比较黑白或者让颜色对比更加明显，我们可以通过getImageData()和putImageData()这两个API去实现

显示效果

简单描述一下要使用的API

getImageData()

把画布中的像素数据拿出来

putImageData()

向画布中填充色值

大概流程

1. 获取到画布元素之后把图片绘制到画布上
2. 绘制结束后通过getImageData获取画布中像素数据（rgb色值）
3. 将获取的数据处理结束后通过putImageData放回画布

第一步

 var ctx = myCanvas.getContext('2d')
        var myImage = new Image()
        myImage.src = 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image'
        myImage.crossOrigin = 'Anonymous' // 新增了这一行
        myImage.onload = function () {
            myCanvas.width = myImage.width
            myCanvas.height = myImage.height
            ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
            showImage.src = myCanvas.toDataURL("image/png")
        }

第二步

在这一步我们可以通过console.log(imageData.data.length,myImage.width * myImage.height * 4)这里得知总像素数据等于宽*高*4从而判断出这个数组数据3个为一组分布代表r,g,b

关于rgb的理解可以参考这个文章 16进制颜色

var imageData = ctx.getImageData(0, 0, myImage.width, myImage.height)
console.log(imageData.data.length,myImage.width * myImage.height * 4)
for (let i = 0; i < imageData.data.length; i += 4) {
    var r = imageData.data[i]
    var g = imageData.data[i + 1]
    var b = imageData.data[i + 2]
    imageData.data[i] = ((r + g + b) / 3)
    imageData.data[i + 1] = ((r + g + b) / 3)
    imageData.data[i + 2] = ((r + g + b) / 3)
}

第三步

ctx.putImageData(imageData, 0, 0)

全代码

<canvas id="myCanvas">

</canvas>
<img id="showImage" />
 <script>
        var ctx = myCanvas.getContext('2d')
        var myImage = new Image()
        myImage.src = 'https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/56a409021bf987376f220b475cd7a024~300x300.image'
        myImage.crossOrigin = 'Anonymous' // 新增了这一行
        myImage.onload = function () {
            myCanvas.width = myImage.width
            myCanvas.height = myImage.height
            ctx.drawImage(myImage, 0, 0, myImage.width, myImage.height)
            showImage.src = myCanvas.toDataURL("image/png")
            var imageData = ctx.getImageData(0, 0, myImage.width, myImage.height)
           
            for (let i = 0; i < imageData.data.length; i += 4) {
                var r = imageData.data[i]
                var g = imageData.data[i + 1]
                var b = imageData.data[i + 2]
                imageData.data[i] = ((r + g + b) / 3)
                imageData.data[i + 1] = ((r + g + b) / 3)
                imageData.data[i + 2] = ((r + g + b) / 3)
            }
            ctx.putImageData(imageData, 0, 0)
        }
</script>

视频的处理方式和他一样，我们可以通过修改第二步中的操作，去实现自己想要的效果

微信小程序要实现的话

可以看到官方也提供了相应的方法，可以参考上一章说的结合这里的内容去实现

之后

之后预计会出，通过画布剪切图片和把视频的某个片段导出成gif图片的文章