Canvas学习笔记——马赛克案例

忘是亡心i 2022-09-05 00:10 239阅读 0赞

这篇文章要讲的是如何将一张照片变成马赛克的照片，利用`Canvas`中操作像素的方法可实现。马赛克的原理无非就是视觉上把原来的像素大小放大，将若干个小像素组成一个块变成大像素，比如可以将`5*5`的像素当作一个块，在这个块中随机选择一个像素的颜色作为整个块的颜色即可。实现代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <script> window.onload = function() { let canvas = document.getElementById('test') if(canvas.getContext) { let ctx = canvas.getContext('2d') // 把一个图片变成马赛克图片绘制到第一个图片的右侧区域 // 先把图片展示到画布上 let image = new Image() image.src = 'imgs/miao.png' // 加载图片 image.onload = function() { canvas.width = image.width * 2 canvas.height = image.height ctx.drawImage(image, 0, 0) // 获取图片的像素数据 // console.log(image.width, image.height) let oldImage = ctx.getImageData(0,0,image.width, image.height) // 创建一个新的变量存储马赛克像素数据 let newImage = ctx.createImageData(image.width, image.height) // 定义一个size为5的大小的块(5个像素为一个单位)，最终可以把整个图片横向分为width/size块 // 纵向可以分为height/size块 let size = 5 for(let i = 0; i < oldImage.width/size; i++) { for(let j = 0; j < oldImage.height/size; j++) { // 从一个块里找到某个随机像素点，获取这个像素点的颜色 let x = Math.floor(Math.random()*size) let y = Math.floor(Math.random()*size) let color = getPxColor(oldImage, i*size+x, j*size+y) // console.log(color) // 把颜色重新绘制到每个小块中 for(let k = 0; k < size; k++) { for(let t = 0; t < size; t++) { setPxColor(newImage, i*size+k, j*size+t, color) } } } } ctx.putImageData(newImage, image.width, 0) } } // 获取坐标像素点数据的方法 function getPxColor(imageData, x, y) { // 一个像素点颜色由4个值组成 let color = [] let width = imageData.width color[0] = imageData.data[(y*width+x)*4] color[1] = imageData.data[(y*width+x)*4+1] color[2] = imageData.data[(y*width+x)*4+2] color[3] = imageData.data[(y*width+x)*4+3] return color } // 设置某个坐标的像素值 function setPxColor(imageData, x, y, color) { let width = imageData.width imageData.data[(y*width+x)*4] = color[0] imageData.data[(y*width+x)*4+1] = color[1] imageData.data[(y*width+x)*4+2] = color[2] imageData.data[(y*width+x)*4+3] = color[3] } } </script>
    </head>
    <body>
      <canvas id="test"></canvas>
    </body>
    </html>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]注意，当在本地操作图片并在本地测试时，谷歌浏览器会报错：`Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.`，原因是本地图片默认是没有域名的，使用`getImageData`方法时浏览器判断出图片和canvas所在域不同，即跨源而出错。可以采用在服务器环境下运行`html`。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hvc2hpem9sYQ_size_16_color_FFFFFF_t_70]: /images/20220829/edfa21ef20354e7bbc2b373b9c631660.png