LeetCode 733——图像渲染(使用JavaScript语言)|刷题打卡

简介: LeetCode 733——图像渲染(使用JavaScript语言)|刷题打卡

前言

掘金团队号上线,助你 Offer 临门! 点击 查看详情

题目描述

有一幅以二维整数数组表示的图画,每一个整数表示该图画的像素值大小,数值在 0 到 65535 之间。

给你一个坐标 (sr, sc) 表示图像渲染开始的像素值(行 ,列)和一个新的颜色值 newColor,让你重新上色这幅图像。

为了完成上色工作,从初始坐标开始,记录初始坐标的上下左右四个方向上像素值与初始坐标相同的相连像素点,接着再记录这四个方向上符合条件的像素点与他们对应四个方向上像素值与初始坐标相同的相连像素点,……,重复该过程。将所有有记录的像素点的颜色值改为新的颜色值。

最后返回经过上色渲染后的图像。

image.png

方法:(DFS深度优先搜索)

思路:使用递归,递归的结束条件是关键,核心思路是考虑全面边界条件,当上下左右任意一个点超出边界时,或者坐标对应的点和初始坐标对应的颜色不同则返回。

// 解决本题的核心思路是考虑全面边界条件,当上下左右的点超出边界的时候,或者
// 坐标对应的点 和初始坐标对应的颜色不同则返回。
var floodFill = function (image, sr, sc, newColor) {
    // 记录image的长度  相当于二维矩阵由多少行
    let m = image.length;
    // 记录二维矩阵由多少列
    let n = image[0].length;
    // 记录起始点的颜色值
    let orignalColor = image[sr][sc];
    // 如果起始点的颜色等于新的颜色,则直接返回二位矩阵
    if(image[sr][sc] == newColor) {
        return image;
    }
    // 开始染色的函数
    const fill = (i,j) => {
        if(i < 0 || j < 0 || i == m || j == n ||image[i][j] != orignalColor) {
            return;
        }
        image[i][j] = newColor;
        // 起始点上边的点
        fill(i-1,j);
        // 起始点下边的点
        fill(i+1,j);
        // 起始点左边的点
        fill(i,j-1);
        // 起始点右边的点
        fill(i,j+1);
    }
    // 调用函数
    fill(sr,sc);
    return image;
};

伪代码

function imageFill(image,sr,sc,newColor):
  // 记录image的长度,相当于二维矩阵的长度
  m ← image.length;
  // 记录二维矩阵列的长度
  n ← image[0].length;
  // 记录起始点的颜色值
  orignalColor ← image[sr][sc];
  // 如果起始点的颜色和newColor的值相同,直接返回二维矩阵image
  if image[sr][sc] == newColor:
    return image;
  // 图像渲染的函数
  function fill(i,j):
    // 递归的结束条件:如果坐标出界或者目标元素的像素值和起始点颜色值不同则返回。
    if (i < 0 || j < 0 || i == m || j == n ||image[i][j] != orignalColor):
      return;
    // 将第i行第j列的值修改为新的像素值
    image[i][j] = newColor;
    // 分别将上下左右四个点的坐标代入递归函数
    fill(i-1,j);
    fill(i+1,j);
    fill(i,j-1);
    fill(i,j+1);
  // 调用图像渲染函数
  fill(sr,sc);
  // 返回渲染后的图像
  return image;

算法复杂度分析

  • 时间复杂度:O(n)
  • 空间复杂度:O(n)

执行结果

image.png

相关文章
|
4月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
105 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
3月前
|
数据采集 JavaScript 搜索推荐
服务器端渲染(SSR)(Nuxt+Next.js)
服务器端渲染(SSR)技术在服务器上生成页面HTML,提升首屏加载速度和SEO效果。Nuxt.js和Next.js分别是基于Vue.js和React.js的流行SSR框架。Nuxt.js提供自动化路由管理、页面级数据获取和布局系统,支持SSR和静态站点生成。Next.js支持SSR、静态生成和文件系统路由,通过`getServerSideProps`和`getStaticProps`实现数据获取。SSR的优点包括首屏加载快、SEO友好和适合复杂页面,但也会增加服务器压力、开发限制和调试难度。选择框架时,可根据项目需求和技术栈决定使用Nuxt.js或Next.js。
|
4月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
135 4
|
4月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
142 2
|
4月前
|
机器学习/深度学习
Leetcode第48题(旋转图像)
这篇文章介绍了LeetCode第48题“旋转图像”的解题方法,通过原地修改二维矩阵实现图像的顺时针旋转90度。
46 0
Leetcode第48题(旋转图像)
|
4月前
|
数据采集 存储 JavaScript
Dynamic Website 爬虫:应对动态内容与 JavaScript 渲染挑战
本文深入探讨了如何设计针对动态网站的爬虫,以采集 WIPO Brand Database 中的专利和技术信息。文章详细介绍了动态网站的挑战,包括 JavaScript 渲染、反爬虫机制和异步加载,并提出了解决方案,如使用 Selenium 模拟浏览器、代理 IP 技术和 API 抓取。最后,通过具体代码示例展示了如何实现这些技术手段。
322 0
|
4月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
56 0
|
4月前
|
存储 JSON JavaScript
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
JavaScript动态渲染页面爬取——Pyppeteer爬取实战
59 0
|
6月前
|
JavaScript 前端开发 UED
服务器端渲染新浪潮:用Vue.js和Nuxt.js构建高性能Web应用
【8月更文挑战第30天】在现代Web开发中,提升应用性能和SEO友好性是前端开发者面临的挑战。服务器端渲染(SSR)能加快页面加载速度并改善搜索引擎优化。Vue.js结合Nuxt.js提供了一个高效框架来创建SSR应用。通过安装`create-nuxt-app`,可以轻松创建新的Nuxt.js项目,并利用其自动路由功能简化页面管理。Nuxt.js默认采用SSR模式,并支持通过`asyncData`方法预取数据,同时提供了静态站点生成和服务器端渲染的部署选项,显著提升用户体验。
126 0

热门文章

最新文章