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

Hoshizola

于 2021-08-15 21:28:42 发布

阅读量443

点赞数 1

分类专栏：前端文章标签： canvas js

本文链接：https://blog.youkuaiyun.com/Hoshizola/article/details/119720179

版权

这篇博客探讨了如何利用Canvas和JavaScript将照片转换为马赛克效果。通过解析像素并创建大像素块，文章提供了实现马赛克效果的代码示例。在本地测试时，由于跨源问题，谷歌浏览器会出现错误，解决方法是在服务器环境中运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章要讲的是如何将一张照片变成马赛克的照片，利用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
          ct