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

相关文章
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
402 57
|
3月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
9月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
488 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
7月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
9月前
|
数据采集 前端开发 JavaScript
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
277 17
|
11月前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
723 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
341 4
|
数据采集 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。
|
机器学习/深度学习 人工智能 自然语言处理
280页PDF,全方位评估OpenAI o1,Leetcode刷题准确率竟这么高
【10月更文挑战第24天】近年来,OpenAI的o1模型在大型语言模型(LLMs)中脱颖而出,展现出卓越的推理能力和知识整合能力。基于Transformer架构,o1模型采用了链式思维和强化学习等先进技术,显著提升了其在编程竞赛、医学影像报告生成、数学问题解决、自然语言推理和芯片设计等领域的表现。本文将全面评估o1模型的性能及其对AI研究和应用的潜在影响。
345 1
|
机器学习/深度学习
Leetcode第48题(旋转图像)
这篇文章介绍了LeetCode第48题“旋转图像”的解题方法,通过原地修改二维矩阵实现图像的顺时针旋转90度。
122 0
Leetcode第48题(旋转图像)