当前位置： 首页 > article >正文

【第4章 图像与视频】4.2 图像的缩放

article 2025/9/28 15:16:32

文章目录

  • 前言
  • 示例-图像的缩放
  • 在 Canvas 边界之外绘制图像

前言

在上节中读者已经学会了如何使用 drawImage() 方法将一幅未经缩放的图像绘制到 canvas 之中。现在我们就来看看如何用该方法在绘制图像的时候进行缩放

示例-图像的缩放

未缩放的图像，显示图形原有大小。

在这里插入图片描述

缩放后的图像，将图形的宽高放到到和 canvas 大小一致。

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><title>4-2-图像的缩放</title><style>body {background: #eeeeee;}#canvas {background: #ffffff;margin-top: 5px;margin-left: 10px;-webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);border: 1px solid rgba(0, 0, 0, 0.2);}</style></head><body><div id="controls"><input id="scaleCheckbox" type="checkbox" />缩放图片</div><canvas id="canvas" width="1000" height="600">canvas not supports</canvas><script>'use strict'let canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),image = new Image(),scaleCheckbox = document.getElementById('scaleCheckbox')let drawImage = () => {context.clearRect(0, 0, canvas.width, canvas.height)if (scaleCheckbox.checked) {context.drawImage(image, 0, 0, canvas.width, canvas.height)} else {context.drawImage(image, 0, 0)}context.restore()}scaleCheckbox.onchange = (e) => {drawImage()}image.src = './waterfall.png'image.onload = () => {context.drawImage(image, 0, 0)}</script></body>
</html>

在 Canvas 边界之外绘制图像

图像可以绘制在 canvas 之内，也可以通过指定坐标值将图像绘制在它之外。在应用程序放大倍数大于 1.0 的情况下，就会把图像的绘制点指定到 canvas 外面去。

如果你向 canvas 之中绘制的图像有一部分会落在 canvas 的范围之外，那么浏览器就会将 canvas 范围外的那部分图像忽略。

可以在 canvas 范围之外进行绘制，这是一项重要的功能。我们把图像绘制在 canvas 范围外，并且通过平移 canvas 的坐标系来让背景中的某一部分内容显示在当前视窗范围内。

示例：将缩放后的图片绘制于Canvas中央

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>4-4-图像的缩放</title><style>/* 设置页面背景颜色 */body {background: rgba(100, 145, 250, 0.3);}/* 调整滑动条的对齐和大小 */#scaleSlider {vertical-align: 10px;width: 100px;margin-left: 90px;}/* 设置画布的边距、边框和光标样式 */#canvas {margin: 10px 20px 0px 20px;border: thin solid #aaa;cursor: crosshair;}/* 调整控制面板的边距和内边距 */#controls {margin-left: 15px;padding: 0;}/* 设置缩放比例显示框的位置、大小和样式 */#scaleOutput {position: absolute;width: 60px;height: 30px;margin-left: 10px;vertical-align: center;text-align: center;color: blue;font: 18px Arial;text-shadow: 2px 2px 4px rgba(100, 140, 250, 0.8);}</style></head><body><div id="controls"><div id="scaleOutput">1.0</div><input type="range" id="scaleSlider" min="1" max="3.0" step="0.1" value="1.0" /></div><canvas id="canvas" width="800" height="520"> canvas not supports </canvas><script>// 获取HTML元素const canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),scaleSlider = document.getElementById('scaleSlider'),scaleOutput = document.getElementById('scaleOutput'),MIN_SCALE = 1.0,MAX_SCALE = 3.0let scale = 1.0const image = new Image()// 绘制图像的函数function drawImage() {const w = canvas.width,h = canvas.height,sw = w * scale,sh = h * scalecontext.clearRect(0, 0, w, h)context.drawImage(image, w / 2 - sw / 2, h / 2 - sh / 2, sw, sh)}// 更新缩放比例文本的函数function drawScaleText(value) {const text = parseFloat(value).toFixed(1)let percent = parseFloat(value - MIN_SCALE) / parseFloat(MAX_SCALE - MIN_SCALE)scaleOutput.textContent = textpercent = percent < 0.35 ? 0.35 : percentscaleOutput.style.fontSize = (percent * MAX_SCALE) / 1.5 + 'em'}// 滑动条的事件处理函数scaleSlider.onchange = (e) => {scale = e.target.valueif (scale < MIN_SCALE) {scale = MIN_SCALE} else if (scale > MAX_SCALE) {scale = MAX_SCALE}drawScaleText(scale)drawImage()}// 初始化画布样式context.fillStyle = 'rgba(100, 140, 250, 0.5)'context.strokeStyle = 'yellow'context.shadowColor = 'rgba(50, 50, 50, 1.0)'context.shadowOffsetX = 5context.shadowOffsetY = 5context.shadowBlur = 10// 设置图像源image.src = 'waterfall.png'// 图像加载完成后的事件处理函数image.onload = () => {drawImage()drawScaleText(scaleSlider.value)}</script></body>
</html>

相关文章：

【第4章 图像与视频】4.2 图像的缩放

文章目录 前言示例-图像的缩放在 Canvas 边界之外绘制图像 前言 在上节中读者已经学会了如何使用 drawImage() 方法将一幅未经缩放的图像绘制到 canvas 之中。现在我们就来看看如何用该方法在绘制图像的时候进行缩放 示例-图像的缩放 未缩放的图像&#xff0c;显示图形原有大…...

编程日记 2025/9/24 16:41:02

针对C语言的开发工具推荐及分析（涵盖编辑器、集成开发环境（IDE）、编译器、调试工具及辅助工具）

以下是对C语言开发工具的全面推荐与分析&#xff0c;涵盖编辑器、集成开发环境&#xff08;IDE&#xff09;、编译器、调试工具及辅助工具&#xff0c;帮助您根据需求选择合适工具&#xff1a; 目录 一、集成开发环境&#xff08;IDE&#xff09; 1. Visual Studio (Windows) …...

编程日记 2025/8/7 3:33:54

在 WSL Ubuntu-24.04 上安装 Nacos 2.5.1 并使用 MySQL 数据库

在微服务架构中&#xff0c;Nacos 是一个非常重要的服务发现和配置管理工具。本文将详细介绍如何在 WSL&#xff08;Windows Subsystem for Linux&#xff09;中的 Ubuntu-24.04 系统上安装 Nacos 2.5.1&#xff0c;并将其配置为使用 MySQL 数据库进行数据存储。我们将使用 roo…...

编程日记 2025/6/10 21:45:33

敏捷开发中如何避免迭代失控

在敏捷开发过程中避免迭代失控&#xff0c;需要实施合理规划迭代目标、明确职责分工、强化沟通机制、严格控制需求变更等措施&#xff0c;其中合理规划迭代目标尤为重要&#xff0c;它确保团队聚焦于关键任务&#xff0c;避免因目标不清晰而导致的迭代混乱和失控。 一、合理规划…...

编程日记 2025/9/27 21:37:36

Python基础 | jupyter工具的安装与基本使用

@[TOC](Python基础 | jupyter工具的安装与基本使用 一、jupyter介绍1.1 jupyter简介2.2 jupyter主要特点二、实践环境介绍三、安装Python33.1 更新软件源3.2 安装Python33.3 查看版本3.4 更换pip源四、安装jupyter工具4.1 安装jupyter4.2 启动jupyter4.3 访问jupyter服务五、测…...

编程日记 2025/9/12 22:35:19

Python开发AI智能体(九)———构建RAG对话应用

前言 上篇文章我们介绍了如何在Langchain中构建代理 这篇文章我们将带领大家构建一个RAG对话应用 一、什么是RAG对话应用&#xff1f; RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09;技术通过从外部知识库检索相关信息&#xff0c;并将…...

编程日记 2025/9/26 11:16:50

NW907NW918美光固态闪存NW920NW930

NW907NW918美光固态闪存NW920NW930 技术解析&#xff1a;美光NW系列固态闪存的核心突破 美光NW907、NW918、NW920、NW930四款固态闪存产品&#xff0c;代表了当前存储技术的顶尖水平。其核心创新在于G9 NAND架构的深度优化&#xff0c;采用更先进的5纳米制程工艺&#xff0c;…...

编程日记 2025/9/26 20:07:09

【Deepseek 学网络互联】跨节点通信global 和节点内通信CLAN保序

Clan模式下的源端保序与Global类似&#xff0c;目的端保序则退化成通道保序&#xff0c;此时仅支持网络单路径保序。”这里的通道保序怎么理解&#xff1f; 用户可能正在阅读某种硬件架构文档&#xff08;比如NVIDIA的NVLink或InfiniBand规范&#xff09;&#xff0c;因为"…...

编程日记 2025/9/27 8:27:02

Python 迭代器：从基础到高级

在 Python 中&#xff0c;迭代器&#xff08;Iterator&#xff09;是一种非常重要的概念&#xff0c;它允许我们逐个访问集合中的元素&#xff0c;而无需暴露其内部的表示形式。迭代器是实现迭代协议&#xff08;Iterator Protocol&#xff09;的对象&#xff0c;通过这种方式&…...

编程日记 2025/9/16 12:38:09

9.5 Q1 | 北京协和医学院GBD发文 | 1990-2021 年全球、区域和国家心力衰竭负担及其根本原因

1.第一段-文章基本信息 文章题目&#xff1a;Global, regional, and national burden of heart failure and its underlying causes, 1990-2021: results from the global burden of disease study 2021 中文标题&#xff1a;1990-2021 年全球、区域和国家心力衰竭负担及其根本…...

编程日记 2025/9/23 21:53:21

软件工程 3.0：智能驱动的软件新时代

在科技飞速发展的当下&#xff0c;软件工程领域正经历着深刻变革&#xff0c;软件工程 3.0 应运而生。这一全新阶段以 “智能增强” 为核心特征&#xff0c;将人工智能&#xff08;AI&#xff09;深度融入软件开发的全流程&#xff0c;为行业带来前所未有的机遇与挑战。​ 一、…...

编程日记 2025/6/23 13:02:50

从C++编程入手设计模式1——单例模式

从C编程入手设计模式 在这之前&#xff0c;为什么要有设计模式 ​ Design Pattern是一个非常贴近工程化的一个议题&#xff0c;我们首先再开始之前&#xff08;尽管有一些朋友可能已经早早就掌握了设计模式&#xff0c;但是出于看乐子的心态还是进来看看我写的有多烂&#xf…...

编程日记 2025/9/16 20:30:30

根据Cortex-M3（包括STM32F1）权威指南讲解MCU内存架构与如何查看编译器生成的地址具体位置

首先我们先查看官方对于Cortex-M3预定义的存储器映射 1.存储器映射 1.1 Cortex-M3架构的存储器结构 内部私有外设总线&#xff1a;即AHB总线&#xff0c;包括NVIC中断&#xff0c;ITM硬件调试&#xff0c;FPB, DWT。 外部私有外设总线&#xff1a;即APB总线&#xff0c;用于…...

编程日记 2025/9/26 6:52:49

vue的h函数（在 Vue 2中也称为 createElement）理解

官方定义 定义: 返回一个“虚拟节点” &#xff0c;通常缩写为 VNode: 一个普通对象&#xff0c;其中包含向 Vue 描述它应该在页面上呈现哪种节点的信息&#xff0c;包括对任何子节点的描述。用于手动编写render h函数格式说明及使用 h 接收三个参数 type: 必需&#xff0c…...

编程日记 2025/9/22 11:22:58

MCP入门实战（极简案例）

MCP简介 MCP(Model Context Protocol,模型上下文协议)2024年11月底由 Antbropic 推出的一种开放标准，旨在统一大型语言模型(LLM)与外部数据源和工具之间的通信协议。 Function Calling是AI模型调用函数的机制，MCP是一个标准协议，使AI模型与API无缝交互，而Al Agent是一个…...

编程日记 2025/9/26 18:02:52

STM32中，如何理解看门狗

在STM32微控制器中&#xff0c;看门狗&#xff08;Watchdog&#xff09;是一种硬件计时器&#xff0c;用于监控系统运行状态&#xff0c;防止软件死锁或跑飞。其核心机制是&#xff1a;系统需定期“喂狗”&#xff08;复位看门狗计数器&#xff09;&#xff0c;若未及时喂狗&am…...

编程日记 2025/7/12 22:21:42

Cursor从入门到精通实战指南（一）：开始使用Cursor

一、简介与核心优势 Cursor是一款基于VSCode开发的AI编程工具&#xff0c;集成了GPT-4、Claude 3.5等先进大语言模型&#xff0c;支持代码补全、生成、重构、调试等功能。其核心优势包括&#xff1a; 高效协作&#xff1a;通过自然语言对话实现代码开发&#xff0c;支持跨文件…...

编程日记 2025/9/26 19:21:43

麒麟v10+信创x86处理器离线搭建k8s集群完整过程

前言 最近为某客户搭建内网的信创环境下的x8s集群&#xff0c;走了一些弯路&#xff0c;客户提供的环境完全与互联网分离&#xff0c;通过yum、apt这些直接拉依赖就别想了&#xff0c;用的操作系统和cpu都是国产版本&#xff0c;好在仍然是x86的&#xff0c;不是其他架构&…...

编程日记 2025/9/14 11:45:47

计算机组成原理——cache

3.4cache 出自up主Beokayy传送门 1.局部性原理 时间局部性&#xff1a; 在最近的未来要用到的信息&#xff0c;很可能是现在正在使用的信息&#xff0c;因为程序中存在循环。 空间局部性&#xff1a; 在最近的未来要用到的信息&#xff0c;很可能与现在正在使用的信息在存储…...

编程日记 2025/9/27 0:57:26

EasyExcel使用导出模版后设置 CellStyle失效问题解决

EasyExcel使用导出模版后在CellWriteHandler的afterCellDispose方法设置 CellStyle失效问题解决方法 问题描述&#xff1a;excel 模版塞入数据后&#xff0c;需要设置单元格的个性化设置时失效&#xff0c;本文以设置数据格式为例&#xff08;设置列的数据展示时需要加上千分位…...

编程日记 2025/9/26 0:56:31

关于AWESOME-DIGITAL-HUMAN的部署

AWESOME-DIGITAL-HUMAN是一个开源数字人项目&#xff0c;可以容器化部署&#xff0c;资源占用少&#xff0c;可以对接dify&#xff0c;使用起来也很方便&#xff0c;非常感谢开发者。 容器化部署后&#xff0c;其实是有两个容器&#xff0c;分别启动两个服务&#xff0c;一个前…...

编程日记 2025/7/10 22:44:53

WebAssembly 及 HTML Streaming：重塑前端性能与用户体验

WebAssembly 及 HTML Streaming&#xff1a;重塑前端性能与用户体验 引言 在移动互联网时代&#xff0c;用户对 Web 应用的性能和体验要求日益苛刻。白屏时间、首屏渲染速度、交互流畅度&#xff0c;甚至 SEO 优化&#xff0c;都成为前端工程师必须面对的挑战。传统的前端技术…...

编程日记 2025/7/8 17:59:29

python同步mysql数据

python写了一个简单的mysql数据同步脚本,只作为学习练习,大佬勿喷 # -*- coding: utf-8 -*- """ Time:2025/5/29 14:38 Auth:HEhandsome """ import pymysql from pymysql import Connectclass Mysql:def __init__(self):#源数据库self.sou_hos…...

编程日记 2025/7/12 19:06:36

shell之通配符及正则表达式，grep参数

通配符与正则表达式 通配符&#xff08;Globbing&#xff09; 通配符是由 Shell 处理的特殊字符&#xff0c;用于路径或文件名匹配。当 Shell 在命令参数中遇到通配符时&#xff0c;会将其扩展为匹配的文件路径&#xff1b;若没有匹配项&#xff0c;则作为普通字符传递给命令…...

编程日记 2025/8/11 0:21:25

RuoYi前后端分离框架集成手机短信验证码（一）之后端篇

一、背景 本项目基于RuoYi 3.8.9前后端分离框架构建，采用Spring Security实现系统权限管理。作为企业级应用架构的子模块，系统需要与顶层项目实现用户数据无缝对接（以手机号作为统一用户标识），同时承担用户信息采集的重要职能。为此，我们在保留原有账号密码登录方式的基…...

编程日记 2025/9/14 0:01:25

Knife4j框架的使用

文章目录 引入依赖配置Knife4j使用Knife4j 访问 SpringBoot 生成的文档 Knife4j 是基于 Swagger 的增强工具&#xff0c;对 Swagger 进行了拓展和优化&#xff0c;从而有更美观的界面设计和更强的功能 引入依赖 Spring Boot 2.7.18 版本 <dependency> <groupId>c…...

编程日记 2025/9/27 1:22:02

深兰科技陈海波率队考察南京，加速AI医诊大模型区域落地应用

近日&#xff0c;深兰科技创始人、董事长陈海波受邀率队赴南京市&#xff0c;先后考察了南京江宁滨江经济开发区与鼓楼区&#xff0c;就推进深兰AI医诊大模型在南京的落地应用&#xff0c;与当地政府及相关部门进行了深入交流与合作探讨。 此次考察聚焦于深兰科技自主研发的AI医…...

编程日记 2025/9/25 19:55:21

【芯片设计中的交通网络革命：Crossbar与NoC架构的博弈C架构的博弈】

在芯片设计领域&#xff0c;总线架构如同城市交通网&#xff0c;决定了数据流的通行效率。随着AI芯片、车载芯片等复杂场景的爆发式增长&#xff0c;传统总线架构正面临前所未有的挑战。本文将深入解析两大主流互连架构——Crossbar与NoC的优劣&#xff0c;揭示芯片"交通网…...

编程日记 2025/9/26 19:36:53

deepseek告诉您http与https有何区别？

有用户经常问什么是Http , 什么是Https &#xff1f; 两者有什么区别&#xff0c;下面为大家介绍一下两者的区别 一、什么是HTTP HTTP是一种无状态的应用层协议&#xff0c;用于在客户端浏览器和服务器之间传输网页信息&#xff0c;默认使用80端口 二、HTTP协议的特点 HTTP协议…...

编程日记 2025/9/28 6:43:15

mac将自己网络暴露到公网

安装服务 brew tap probezy/core && brew install cpolar// 安装cpolar sudo cpolar service install // 启动服务 sudo cpolar service start访问管理网站 http://127.0.0.1:9200/#/tunnels/list 菜单“隧道列表” 》 编辑 自定义暴露的端口 再到在线列表中查看公网…...

编程日记 2025/9/26 19:19:22