html实现图片裁剪处理(附源码)

news2024/11/24 7:58:28

文章目录

  • 1.设计来源
    • 1.1 主界面
    • 1.2 裁剪界面
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
  • 源码下载

作者:xcLeigh
文章地址:https://blog.csdn.net/weixin_43151418/article/details/134455169


html实现图片裁剪处理(附源码),支持图片放大缩小,裁剪图片,代码上手简单,代码独立,可以直接使用。也可直接预览效果。

1.设计来源

1.1 主界面

    主界面,左侧是上传图片容器,可以通过功能按钮放大缩小图片,通过裁切按钮,进行图片切割,将切割完成的图片放到右侧展示。

请添加图片描述

1.2 裁剪界面

     裁剪界面,通过上传图像,进行图片上传,然后图片容器显示,可以通过功能按钮放大缩小图片,通过裁切按钮,进行图片切割,将切割完成的图片放到右侧展示。

请添加图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示,可在此代码基础上更加完善功能,支持扩展自己的风格,可以删减内容,打造属于自己的裁剪图片模板。

2.2 源代码

    这里是主界面的代码,其他图片、js、css等代码,见下面的 源码下载 ,里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>html实现图片裁剪</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<link href="img/favicon.png" rel="icon">
</head>
<body>
	<div class="titleH">
		图片裁剪
	</div>
	<div class="container">
	  <div class="imageBox">
		<div class="thumbBox"></div>
		<div class="spinner" style="display: none">请上传图片...</div>
	  </div>
	  <div class="action"> 
		<div class="new-contentarea tc"> 
			<a href="javascript:void(0)" class="upload-img">
				  <label for="upload-file">上传图像</label>
		  </a>
		  <input type="file" class="" name="upload-file" id="upload-file" />
		</div>
		<input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
		<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
		<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
	  </div>
	  <div class="cropped"></div>
	</div>
	
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/cjPhoto.js"></script>
</body>
</html>

源码下载

html实现图片裁剪处理(源码) 点击下载
在这里插入图片描述


     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA,体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请


     ① 🉑提供云服务部署(有自己的阿里云);
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务;
     如🈶合作请联系我,期待您的联系。
    :本文撰写于CSDN平台,作者:xcLeigh(所有权归作者所有),https://blog.csdn.net/weixin_43151418,如果相关下载没有跳转,请查看这个地址,相关链接没有跳转,皆是抄袭本文,转载请备注本文原地址。


     亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请留言(评论),博主看见后一定及时给您答复,💌💌💌


原文地址:https://blog.csdn.net/weixin_43151418/article/details/134455169(防止抄袭,原文地址不可删除)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1220203.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux下安装部署redis(离线模式)

一、准备工作 1.下载redis的安装包 下载地址&#xff1a;Index of /releases/ 大家可以自行选择redis的版本&#xff0c;笔者选择的是最新的 2.上传到服务器 前提是我先在服务器上创建了一个目录redis7.2.3&#xff0c;我直接上传到这个目录下 二、安装redis 1.解压redis t…

阿里云服务器ECS安装宝塔面板

前言 如今各种云服务器租借平台&#xff0c;例如腾讯云、阿里云之类的&#xff0c;很轻松的就能租借得到一台Linux的服务器。但是Linux的管理和使用存在一定的门槛。宝塔面板作为一款流行的服务器管理软件&#xff0c;提供了简单易用的图形化界面和丰富的管理功能&#xff0c;降…

Android SmartTable根据int状态格式化文字及颜色

private void initData() {List<UserInfo> list new ArrayList<>();list.add(new UserInfo("一年级", "李同学", 6, 1, 120, 1100, 450, 0));list.add(new UserInfo("一年级", "张同学", 6, 2, 120, 1100, 450, 1));list…

electron使用better-sqlite3打包失败(electron打包有进程没有界面)

remove *\chrome_100_percent.pak: Access is denied. 解决&#xff1a; 管理员权限执行&#xff1a;taskkill /IM 你的进程名.exe /F&#xff0c;再次执行build electron使用better-sqlite3打包后有进程没有界面 原因是代码及依赖包安装有误&#xff0c;模块丢失。主要分享的…

Flat Ads将在杭州举办社交出海沙龙,探寻海外巨大增量空间

深圳站落幕后&#xff0c;Flat Ads社交沙龙活动迎来杭州站&#xff01;11月29日&#xff0c;Flat Ads联动Alibaba Cloud、TopOn、融云&#xff0c;开展《泛娱乐社交APP出海新风口-杭州站》&#xff0c;分享如何捕捉出海新赛道的风向标&#xff0c;并迅速实现获客增长&#xff0…

36 mysql 主键冲突 和 唯一索引冲突

前言 我们这里 来看一下 我们经常碰到的 "duplicate key xxx" 测试表结构如下 CREATE TABLE tz_test (id int(11) unsigned NOT NULL AUTO_INCREMENT,field1 varchar(128) DEFAULT NULL,PRIMARY KEY (id) USING BTREE,KEY field1 (field1) USING BTREE ) ENGINEI…

超声功率放大器使用范围有哪些

超声功率放大器是一种特殊的设备&#xff0c;用于放大超声波信号的功率级别。它在各种领域都有广泛的应用范围&#xff0c;下面将详细介绍超声功率放大器的使用范围。 医学影像领域&#xff1a; 在医学影像领域&#xff0c;超声功率放大器被广泛用于超声诊断设备。它们能够放大…

亲测一款超实用的在线制作产品册工具,一看就会

最近&#xff0c;我一直在寻找一款简单易用的在线制作产品册工具&#xff0c;终于让我找到了一个超实用的神器&#xff01;这款工具不仅功能强大&#xff0c;而且操作简单&#xff0c;一看就会。 首先&#xff0c;这款工具提供了丰富的模板和素材&#xff0c;用户可以根据自己的…

【测试功能篇 01】Jmeter 压测接口最大并发量、吞吐量、TPS

压力测试&#xff0c;我们针对比较关键的接口&#xff0c;可以进行相应的压力测试&#xff0c;主要还是测试看看接口能抗住多少的请求数&#xff0c;TPS稳定在多少&#xff0c;也就是吞吐量多少 安装 Jmeter的安装很简单&#xff0c;官网下载地址 http://jmeter.apache.org/ &…

万字长文:从 C# 入门学会 RabbitMQ 消息队列编程

RabbitMQ 简介 RabbitMQ 是一个实现了 AMQP 协议的消息队列&#xff0c;AMQP 被定义为作为消息传递中间件的开放标准的应用层协议。它代表高级消息队列协议&#xff0c;具有消息定位、路由、队列、安全性和可靠性等特点。 目前社区上比较流行的消息队列有 kafka、ActiveMQ、Pul…

mac中安装Homebrew

1、Homebrew是什么&#xff1f; 软件安装管理工具 2、先检查电脑中是否已经安装了Homebrew 打开终端输入&#xff1a;brew 提示命令没有找到&#xff0c;说明电脑没有安装Homebrew 如果提示上述图片说明Homebrew已经安装成功 3、安装Homebrew 进入https://brew.sh/ 复制的命…

3.ubuntu20.04环境的ros搭建

ros搭建比较简单&#xff0c;主要步骤如下&#xff1a; 1.配置ros软件源&#xff1a; sudo sh -c echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.list 2.配置密钥 sudo apt-key adv --keyser…

01线性回归

目录 常规求解&#xff1a; 矩阵求解 sklean算法求解 # 二元一次方程 # x y 14 # 2x - y 10 常规求解&#xff1a; x np.array([[1,1],[2,-1]])print(x) # [[ 1 1] # [ 2 -1]]y np.array([14, 10])w np.linalg.solve(x, y)print(正常求救&#xff1a;)print(w) …

在Centos7.9_2207安装CDH6.3.2

在Centos7.9_2207安装CDH6.3.2 背景 笔者做大数据开发&#xff0c;实时部分一般要用到HBase、Kudu、Redis等组件来保证幂等性&#xff0c;为了方便&#xff0c;还是选用老古董CDH6.3.2【最后的免费版】做一个单节点机器&#xff0c;方便随时挂起。多节点虚拟机由之前的双路E5…

实践小记——C#科学计数法格式化输出

文章速览 示例默认输出&#xff0c;不设置小数精度设置尾数部分的小数精度 总结参考文章 坚持记录实属不易&#xff0c;希望友善多金的码友能够随手点一个赞。 共同创建氛围更加良好的开发者社区&#xff01; 谢谢~ 示例 默认输出&#xff0c;不设置小数精度 private void Fo…

设计模式之桥接模式--连接抽象与实现(你想知道的问题都有)

目录 概述结构型设计模式桥接模式的定义桥接模式的角色和关系 版本迭代紧耦合版增加品牌两个品牌两款软件松耦合的设计版本迭代业务分析总结 问题升华抽象与实现抽象包含的一些方法或属性依赖于实现部分的接口关联关系与桥接模式桥接模式适合情况谁是实现&#xff0c;谁是抽象组…

vscode设置latex

vscode配置latex 1.安装vscode,并添加环境变量路径 2.安装latex,bin文件夹添加到环境变量路径 3.vscode安装插件 4.vscode->文件->首选项->显示配置内容->setting.json文件&#xff0c;查看其位置目录&#xff0c;通过我的电脑找到此文件&#xff08;不要使用v…

torch - 张量Tensor常见的形式

1.Scalar 通常就是一个数值 x tensor(42.) 输出x&#xff1a; 2.Vector 特征向量 例如&#xff1a;[-5., 2., 0.]在深度学习中通常表示特征&#xff0c;如词向量特征&#xff0c;某一维度特征等 3.Matrix 一般计算的都是矩阵&#xff0c;通常都是多维的。 可以做矩阵的…

C# +.Net检验科信息管理系统源码 LIS系统源码

检验科信息管理系统&#xff08;LIS&#xff09; LIS系统集申请、采样、核收、计费、检验、审核、发布、质控、查询、耗材控制等检验科工作为一体的网络管理系统。它的开发和应用将加快检验科管理的统一化、网络化、标准化的进程。 主要包括以下功能&#xff1a; 1、数据采集…