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

使用Canvas裁剪图片

news 2025/8/26 20:21:39

使用Canvas裁剪图片

概述

在Web开发中，我们经常需要对图片进行裁剪，以满足不同尺寸需求或者实现图片的局部展示。本篇博客将带您深入了解如何使用Canvas技术来实现图片的裁剪功能。我们将通过一个实例来演示如何利用Canvas绘制图片，并通过蒙层和鼠标交互来进行裁剪操作。让我们开始这个Canvas之旅吧！

项目结构

首先，让我们来看一下项目的结构。我们将使用HTML、CSS和JavaScript来实现Canvas裁剪图片功能，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><!-- 省略部分代码 -->
</head>
<body><!-- 省略部分代码 --><div><input type="file" id="imageFile" accept="image/*" /></div><div class="canvas-container"><canvas id="can"></canvas></div><div class="canvas2-container"><canvas id="can2"></canvas></div><script>// JavaScript代码</script></body>
</html>

我们将使用三个div容器，分别用于显示原图、裁剪后的图和裁剪区域。其中，<input type="file" id="imageFile" accept="image/*" /> 用于上传图片。

初始化Canvas

在JavaScript部分，我们先获取Canvas元素和其上下文，如下所示：

const oContainer = document.querySelector('.canvas-container');
const oContainer2 = document.querySelector('.canvas2-container');
const oImageFile = document.querySelector('#imageFile');
const oCan = document.getElementById('can');
const oCan2 = document.getElementById('can2');
const ctx = oCan.getContext('2d');
const ctx2 = oCan2.getContext('2d');

我们使用querySelector方法获取了.canvas-container和.canvas2-container元素作为图片容器，#imageFile为图片上传按钮。接着，我们获取了两个Canvas元素及其上下文。

图片加载与绘制

接下来，我们需要监听图片上传按钮的事件，并在选择图片后将其绘制在Canvas上：

const init = () => {bindEvent();
}function bindEvent () {oImageFile.addEventListener('change', handleFileChange, false);// ... 其他事件监听 ...
}function handleFileChange (e) {const file = e.target.files[0];const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {const data = e.target.result;oImage.src = data;oImage.onload = function () {const { width, height } = this;generateCanvas(oContainer, oCan, width, height);ctx.drawImage(oImage, 0, 0, width, height);drawImageMask(0, 0, width, height, MASK_OPACITY);}}
}function generateCanvas (container, canvas, width, height) {container.style.width = width + 'px';container.style.height = height + 'px';canvas.width = width;canvas.height = height;container.style.display = 'block';
}

 

在bindEvent函数中，我们为图片上传按钮添加了change事件监听，并在选择图片后，通过FileReader读取图片文件，并将其绘制在Canvas上。我们使用drawImage方法将图片绘制在Canvas上，并调用generateCanvas函数，使Canvas的大小与图片保持一致。同时，我们调用drawImageMask函数绘制蒙层，用于裁剪时的显示。

裁剪操作

接下来，我们需要实现裁剪操作。当用户鼠标点击并拖动时，我们可以获取鼠标位置，然后绘制裁剪区域的矩形：

function handleCanvasMouseDown (e) {initPos = [ e.offsetX, e.offsetY ];oCan.addEventListener('mousemove', handleCanvasMouseMove, false);oCan.addEventListener('mouseup', handleCanvasMouseUp, false);
}function handleCanvasMouseMove (e) {const endX = e.offsetX;const endY = e.offsetY;const [ startX, startY ] = initPos;const rectWidth = endX - startX;const rectHeight = endY - startY;const { width, height } = oCan;screenShotData = [ startX, startY, rectWidth, rectHeight ];ctx.clearRect(0, 0, width, height);drawImageMask(0, 0, width, height, MASK_OPACITY);drawScreenShot(width, height, rectWidth, rectHeight);
}function handleCanvasMouseUp () {oCan.removeEventListener('mousemove', handleCanvasMouseMove, false);oCan.removeEventListener('mouseup', handleCanvasMouseUp, false);drawScreenShotImage(screenShotData);
}

在handleCanvasMouseDown函数中，我们记录鼠标点击时的位置。在handleCanvasMouseMove函数中，根据鼠标移动的位置绘制裁剪区域的矩形，并在蒙层上绘制黑色的半透明蒙层。在handleCanvasMouseUp函数中，当鼠标松开后，我们绘制裁剪后的图片。 

图片裁剪

最后，我们需要实现图片的裁剪功能。通过ctx.getImageData方法获取裁剪区域的数据，并绘制在另一个Canvas上：

function drawScreenShot (canWidth, canHeight, rectWidth, rectHeight) {ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = '#000';ctx.fillRect(...initPos, rectWidth, rectHeight);ctx.globalCompositeOperation = 'destination-over';ctx.drawImage(oImage, 0, 0, canWidth, canHeight, 0, 0, canWidth, canHeight);
}function drawScreenShotImage (screenShotData) {const data = ctx.getImageData(...screenShotData);generateCanvas(oContainer2, oCan2, screenShotData[2], screenShotData[3]);ctx2.clearRect(...screenShotData);ctx2.putImageData(data, 0, 0);
}init();

 在drawScreenShot函数中，我们使用globalCompositeOperation属性来控制绘制的方式，先绘制裁剪区域并在蒙层上清除，然后再绘制原图。在drawScreenShotImage函数中，我们使用ctx.getImageData方法获取裁剪区域的数据，然后绘制在第二个Canvas上。

总结

通过以上步骤，我们已经成功实现了使用Canvas来裁剪图片的功能。通过监听鼠标事件，我们可以在图片上绘制裁剪区域，并最终实现图片的裁剪效果。Canvas技术是Web前端开发中不可或缺的一部分，希望本篇博客能够帮助您更好地了解Canvas的应用场景和实践技巧。感谢您的阅读！ 

 

 学习自B站up——前端小野森森

相关文章：

使用Canvas裁剪图片

使用Canvas裁剪图片 概述 在Web开发中&#xff0c;我们经常需要对图片进行裁剪&#xff0c;以满足不同尺寸需求或者实现图片的局部展示。本篇博客将带您深入了解如何使用Canvas技术来实现图片的裁剪功能。我们将通过一个实例来演示如何利用Canvas绘制图片&#xff0c;并通过蒙…...

编程日记 2023/8/4 2:32:18

JavaScript |（三）内建对象 | 数组 | string对象 | 尚硅谷JavaScript基础实战

学习来源&#xff1a;尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 &#x1f4da;数组&#x1f407;数组介绍⭐️数组&#xff08;Array&#xff09;⭐️基本操作⭐️数组的字面量 &#x1f407;数组中的常用方法⭐️push()⭐️pop()⭐️unshift()⭐️shif…...

编程日记 2023/8/4 2:31:17

势能线段树

目录 简单介绍 题目 1. 上帝造题的七分钟 2 2.SUM and REPLACE 3. And RMQ 总结 简单介绍 题目 1. 上帝造题的七分钟 2 链接&#xff1a;https://www.luogu.com.cn/problem/P4145 维护两种操作 1.区间开根号(下取整) 2.区间和询问 显然无法通过懒标记来计算区间开根号…...

编程日记 2023/8/4 2:30:16

【phaser微信抖音小游戏开发004】往画布上增加文本以及文本的操作

我们在states中创建st004.js的类&#xff0c;或者将states中的index.js直接重命名为st004.js&#xff0c;把里面的类名也修改为st004.如下图 在main.js中&#xff0c;引入st004,并设置启用的state为st004。如下图 接下来到states/st004里面&#xff0c;在create里面将文本修改一…...

编程日记 2023/8/4 2:29:15

【1.4】Java微服务：服务注册和调用（Eureka和Ribbon实现）

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 微服务 ✨特色专栏&#xff1a; 知识分享 &#x…...

编程日记 2023/8/4 2:28:13

QT中使用ffmpeg的api进行视频的播放

在了解ffmpeg使用api进行视频的播放之前&#xff0c;我们首先了解一下视频的播放流程。 一、视频的播放流程 首先是我们最常见的视频文件&#xff0c;在播放流程中首先是要打开视频文件&#xff0c;将视频文件中的数据进行解封装&#xff0c;之后再将解封装之后的视频进行解码…...

编程日记 2023/8/4 2:27:09

使用idea实现git操作大全（在项目开发中遇到的实际情况

使用idea实现git操作大全&#xff08;在项目开发中遇到的实际情况&#xff09; 1.安装git插件2.在开发中切记拉一个自己的分支 1.安装git插件 2.在开发中切记拉一个自己的分支 选中需要拉的分支&#xff0c;右键该分支&#xff0c;选中new breach from “分支”&#xff0c;点…...

编程日记 2023/8/4 2:26:08

SQL面试题：一个优化案例

问题描述 假如存在以下两个表&#xff1a; CREATE TABLE customer ( C_CUSTKEY int NOT NULL, C_NAME varchar(25) NOT NULL, C_ADDRESS varchar(40) NOT NULL, C_NATIONKEY int NOT NULL, C_PHONE char(15) NOT NULL, C_ACCTBAL decimal(15,2) NOT NULL, C_MKTSEGMENT char(…...

编程日记 2023/8/4 2:25:07

链表的总体涵盖以及无哨兵位单链表实现——【数据结构】

&#x1f60a;W…Y&#xff1a;个人主页 在学习之前看一下美丽的夕阳&#xff0c;也是很不错的。 如果觉得博主的美景不错&#xff0c;博客也不错的话&#xff0c;关注一下博主吧&#x1f495; 在上一期中&#xff0c;我们说完了顺序表&#xff0c;并且提出顺序表中的问题 1. 中…...

编程日记 2023/8/4 2:24:06

网页版Java五子棋项目（一）websocket【服务器给用户端发信息】

网页版Java五子棋项目&#xff08;一&#xff09;websocket【服务器给用户端发信息】 一、为什么要用websocket二、websocket介绍原理解析 三、代码演示1. 创建后端api&#xff08;TestAPI&#xff09;新增知识点&#xff1a;extends TextWebSocketHandler重写各种方法 2. 建立…...

编程日记 2023/8/4 2:23:05

企业大数据可视化案例专题分享-入门

一、什么是数据可视化&#xff1f; 基本概念&#xff1a;数据可视化是以图示或图形格式表示的数据。让决策者可以看到以直观方式呈现的分析&#xff0c;以便他们可以掌握困难的概念或识别新的模式。借助交互式可视化&#xff0c;可以使用技术深入挖掘图表和图形以获取更多详细…...

编程日记 2023/8/4 2:22:04

GoogLeNet卷积神经网络-笔记

GoogLeNet卷积神经网络-笔记 GoogLeNet是2014年ImageNet比赛的冠军&#xff0c; 它的主要特点是网络不仅有深度&#xff0c; 还在横向上具有“宽度”。 由于图像信息在空间尺寸上的巨大差异&#xff0c; 如何选择合适的卷积核来提取特征就显得比较困难了。 空间分布范围更广的…...

编程日记 2023/8/4 2:21:02

腾讯云TencentOS Server镜像系统常见问题解答

腾讯云TencentOS Server镜像是腾讯云推出的Linux操作系统&#xff0c;完全兼容CentOS生态和操作方式&#xff0c;TencentOS Server操作系统为云上运行的应用程序提供稳定、安全和高性能的执行环境&#xff0c;TencentOS可以运行在腾讯云CVM全规格实例上&#xff0c;包括黑石物理…...

编程日记 2023/8/4 2:20:01

【项目 进程13】2.28共享内存（1） 2.29共享内存（2）

文章目录 2.28共享内存&#xff08;1&#xff09;共享内存&#xff08;效率最高&#xff0c;比内存映射更高。因为内存映射还需一个文件做载体&#xff09;共享内存使用步骤共享内存操作函数头文件 2.29共享内存&#xff08;2&#xff09;共享内存相关问题共享内存和内存映射的…...

编程日记 2023/8/4 2:18:57

Flask框架-流量控制：flask-limiter的使用

一、flask使用flask-limiter存在版本问题 Flask1.1.4 Flask-Bootstrap3.3.7.1 Flask-Caching1.9.0 Flask-Cors3.0.10 Flask-Limiter1.4 Flask-Migrate2.5.3 Flask-RESTful0.3.8 Flask-Script2.0.6 Flask-SocketIO5.0.1 Flask-Sockets0.2.1 Flask-SQLAlchemy2.4.4 Jinjia22.11.…...

编程日记 2023/8/4 2:17:56

【机器学习】西瓜书习题3.5Python编程实现线性判别分析，并给出西瓜数据集 3.0α上的结果

参考代码 结合自己的理解&#xff0c;添加注释。 代码 导入相关的库 import numpy as np import pandas as pd import matplotlib from matplotlib import pyplot as plt导入数据&#xff0c;进行数据处理和特征工程 得到数据集 D { ( x i , y i ) } i 1 m , y i ∈ { 0 ,…...

编程日记 2023/8/4 2:16:56

Elasticsearch：通过动态修剪实现更快的基数聚合

作者&#xff1a;Adrien Grand Elasticsearch 8.9 通过支持动态修剪&#xff08;dynamic pruning&#xff09;引入了基数聚合加速。 这种优化需要满足特定的条件才能生效&#xff0c;但一旦实现&#xff0c;通常会产生惊人的结果。 我们观察到&#xff0c;通过此更改&#xff0…...

编程日记 2023/8/4 2:15:55

Webpack5 生产模式压缩图片ImageMinimizerPlugin

文章目录 一、 ImageMinimizerPlugin是什么&#xff1f;二、已经有了asset&#xff0c;为什么需要ImageMinimizerPlugin&#xff1f;三、怎么使用ImageMinimizerPlugin&#xff1f;四、ImageMinimizerPlugin压缩的成果 一、 ImageMinimizerPlugin是什么&#xff1f; 它的实际依…...

编程日记 2023/8/4 2:14:54

时序预测 | Matlab实现基于BP神经网络的电力负荷预测模型

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 时序预测 | Matlab实现基于BP神经网络的电力负荷预测模型 BP神经网络是一种多层的前馈神经网络，其主要的特点是：信号是前向传播的，而误差是反向传播的。B...

编程日记 2023/8/4 2:13:53

基于回溯算法实现八皇后问题

八皇后问题是一个经典的计算机科学问题&#xff0c;它的目标是将8个皇后放置在一个大小为88的棋盘上&#xff0c;使得每个皇后都不会攻击到其他的皇后。皇后可以攻击同一行、同一列和同一对角线上的棋子。 一、八皇后问题介绍 八皇后问题最早由国际西洋棋大师马克斯贝瑟尔在18…...

编程日记 2023/8/4 2:12:52

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/8/5 7:03:28

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/6/15 17:37:51

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/8/22 3:04:35

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/7/28 0:08:15

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/8/21 20:56:15

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/8/6 7:06:58

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/8/22 4:16:17

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/8/21 19:12:52

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/8/2 6:48:59

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/6/17 23:10:20