JS实现选择图片剪裁及保存

以下是一个简单的示例代码，实现了显示一个文件上传框和一个canvas元素。用户可以选择一张图片文件后，该图像将显示在canvas中，并且用户可以通过鼠标拖拽来选取需要剪裁的区域。单击“剪裁”按钮，程序会将结果保存为新的图片文件并在浏览器中下载。

先看效果图：

源码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>JS图片剪裁并保存</title>
</head>
<body>    <canvas id="canvas" width="800" height="600" style="border:1px solid #000;"></canvas><div>       <input type="file" id="fileInput"><button id="cropButton" disabled>剪裁</button> 用户可以拖动鼠标来选择需要剪裁的区域       </div><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');let image = null;let isDragging = false;let startX = 0;let startY = 0;let endX = 0;let endY = 0;// 加载图片const loadImage = (file) => {const reader = new FileReader();reader.onload = (e) => {image = new Image();image.onload = () => {ctx.drawImage(image, 0, 0);};image.src = e.target.result;};reader.readAsDataURL(file);disableButtons(); //};// 监听文件上传事件const fileInput = document.getElementById('fileInput');fileInput.addEventListener('change', (e) => {const file = e.target.files[0];loadImage(file);});// 监听鼠标事件，绘制选择区域canvas.addEventListener('mousedown', (e) => {if (isDragging) return;isDragging = true;startX = e.offsetX;startY = e.offsetY;endX = startX;endY = startY;});canvas.addEventListener('mousemove', (e) => {if (!isDragging) return;endX = e.offsetX;endY = e.offsetY;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(image, 0, 0);ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';ctx.fillRect(startX, startY, endX - startX, endY - startY);});canvas.addEventListener('mouseup', () => {isDragging = false;if (endX > startX && endY > startY) {enableButtons();}});// 监听确定按钮点击事件，剪裁并保存图片const cropButton = document.getElementById('cropButton');cropButton.addEventListener('click', () => {disableButtons();const croppedCanvas = document.createElement('canvas');const croppedCtx = croppedCanvas.getContext('2d');const width = endX - startX;const height = endY - startY;croppedCanvas.width = width;croppedCanvas.height = height;croppedCtx.drawImage(canvas, startX, startY, width, height, 0, 0, width, height);const url = croppedCanvas.toDataURL();const link = document.createElement('a');link.download = 'cropped-image.png';link.href = url;document.body.appendChild(link);link.click();document.body.removeChild(link);});// 激活按钮const enableButtons = () => {cropButton.disabled = false;           };// 禁用按钮const disableButtons = () => {cropButton.disabled = true;   };</script>
</body>
</html>

OK！

JS实现选择图片剪裁及保存相关推荐

android完美实现拍照选择图片剪裁等代码分享
2个安卓实现实现拍照选择图片剪裁等的代码,都是从正式项目中提取出来了,非常实用,有需要的小伙伴可以参考下. 前言,版本兼容问题主要是由于4.4以前和4.4以后的Uri的格式不同所造成的错误 1. ...
[js] 使用js实现一个图片剪裁的功能
[js] 使用js实现一个图片剪裁的功能 /** * 裁切图片* @param imgUrl 原始图片路径* @param x,y,width,height 从点[x, y]开始,将宽度width,高 ...
android 画板（选择图片作为背景并保存）
我看了一下网上画板的写法有很多种,这篇文章的写法就是简单便捷,个人觉得不错,大家可以参考一下, http://blog.csdn.net/qq_31530015/article/details/511 ...
58行html/js代码实现图片裁剪并保存功能
58行html/js代码实现图片裁剪保存功能 <input type="file" id="file-input" accept="image/ ...
java实现保存一张图片_Java图片剪裁并保存的代码实现
这是一篇入门级文章,高手请略过. 在这篇文章中我们将学习如何用 Java 对图像进行剪裁并将剪裁出来的部分单独保存到文件中. 我们将通过以下步骤来学习: 输入图像,指定要处理的图像路径允许用户拖放要 ...
js实现截取网页上特定位置的图片打印或保存
js实现截取网页上特定位置的图片打印或保存一.实现思路具体思路是创建一个宽和高都是100%的canvas,使其能够覆盖整个页面,然后根据所要截取的图片起始位置相对于canvas的位置(因为是1 ...
利用Album 实现仿微信图片选择（加入了图片剪裁）
本文图片选择基于轻量开源相册 Album,在选择图片完成后会调用系统图片剪裁页面,对图片进行剪裁效果图: 选择图片(可以自定义选择几张): 剪切图片: 使用方法 1.Gradle: compile ...
iOS上传头像, 相册权限,相册权限,拍照上传,相册选择图片,拍照页面语言设置,保存到相册...
2019独角兽企业重金招聘Python工程师标准>>> 1. 权限在打开相机拍照或者打开相册选择图片之前, 有必要先判断先是否有权限, 如果没有权限应该给个提示, 让用户自己去设置 ...
AndroidStudio调用系统相册选择图片并显示、将图片保存到私有空间
有时候为了能让用户自定义软件的背景,我们需要实现从系统相册选择一张图片并将其进行保存,在后面打开的时候继续使用该图片充当背景.为什么要保存到私有空间呢?保存和到读取私有空间的内容是不需要权限的.由于实 ...

JS实现选择图片剪裁及保存

JS实现选择图片剪裁及保存

JS实现选择图片剪裁及保存相关推荐

最新文章

热门文章