cropper+jq（图片裁剪上传）
<link rel="stylesheet" href="../../cropper/cropper.css"> <script type="text/javascript" src="../../cropper/cropper.js"></script>
没有引入jquery的原因
引入jquery
<script src="../jquery-1.10.2.js"></script>
这里使用的是3.1.5版本
<!-- 用一个块元素(容器)包装图像或画布元素 -->
<div class="box"><img id="image" src="../img/act.png">
</div>
$('#image').cropper({aspectRatio: 1 / 1,viewMode: 1,crop: function (e) {console.log(e);}});
示例
父页面
<!-- logo --><div class="layui-row" style="margin-bottom: 8px;"><div class="layui-col-md12"><div class="layui-form-item"><label class="layui-form-label">logo：</label><div class="upload_reveal">上传图片<input type="file" class="upload_file" id="coverImage" name="coverImage" /></div></div><div class="layui-form-item" id="coverImageContent" style="padding-top: 10px"></div></div></div>
// logo--图片回调function setImg (url) {coverImageUrl = url;var html = '<div class="" style="position:relative;margin-left:110px;"><a href="' + url + '" target="_blank " title="点击查看">' +'<img src="' + url + '" height="135px" width="135px" style="margin-bottom: 8px;"></a><div class="delImg">删除</div></div>';$("#coverImageContent").html(html);}// 删除图片$('#coverImageContent').on('click', '.delImg', function (event) {event.stopPropagation();//阻止事件冒泡var that = $(this);layer.confirm('确定删除图片吗？', function (index) {// 最后去删除元素，否则找不到var delItem = that.parent();delItem.remove();layer.close(index);layer.msg('删除成功')coverImageUrl = "";});})var coverImage = document.getElementById('coverImage');coverImage.onchange = function () {var fileData = this.files[0];//这是我们上传的文件console.log('这是我们上传的文件fileData', this.files, fileData);console.log('ocument.getElementById("coverImage").value', document.getElementById("coverImage").value);var aa = document.getElementById("coverImage").value.toLowerCase().split('.'); //以“.”分隔上传文件字符串// var aa=document.form1.userfile.value.toLowerCase().split('.');//以“.”分隔上传文件字符串if (document.getElementById("coverImage").value == "") {layer.msg('图片不能为空！');return;} else {if (aa[aa.length - 1] == 'gif' || aa[aa.length - 1] == 'jpg' || aa[aa.length - 1] == 'bmp'||aa[aa.length - 1] == 'png' || aa[aa.length - 1] == 'jpeg') //判断图片格式{var imagSize = document.getElementById("coverImage").files[0].size;if (imagSize < 1024 * 1024 * 3) {console.log('fileData', fileData); //读取上传文件let reader = new FileReader();//readAsDataURL方法可以将File对象转化为data:URL格式的字符串（base64编码）reader.readAsDataURL(fileData);reader.onload = (e) => {let dataURL = reader.result;console.log('dataURL', dataURL);window.sessionStorage.setItem('coverImage', dataURL); layer.open({title: '编辑图片',type: 2,scrollbar: true,area: ['60%','80%'],content: './imgEdit.html?fileName=' + fileData.name,// content: './imgEdit.html',end: function () { } });} } else {layer.msg("图片大小不能超过3M！");}} else {layer.msg('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片'); //jpg和jpeg格式是一样的只是系统Windows认jpg，Mac OS认jpeg，}}}弹窗页面
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>编辑图片</title><link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css"><link rel="stylesheet" href="../../layuiadmin/style/admin.css"><link rel="stylesheet" href="../open.css"><link rel="stylesheet" href="../../cropper/cropper.css"><style>#coverImageContent {width: 500px;height: auto;}#cropImg {width: 500px;height: 500px;}.previewBox {/* box-shadow: 0 0 5px #adadad; */width: 200px;height: 200px;margin-top: 30px;overflow: hidden;/*这个超出设置为隐藏很重要，否则就会整个显示出来了*/}.previewImg {width: 200px;height: 200px;}</style>
</head><body><div class="layui-fluid"><div class="layui-row layui-col-space15"><div class="layui-col-md12"><form class="layui-form layui-form-pane" action=""><!-- logo --><div class="layui-row"><div class="layui-col-md6"><div class="layui-form-item" id="coverImageContent" style="padding-top: 10px"><img src="" alt="" id="cropImg"></div></div><div class="layui-col-md6"style="display: flex;flex-direction: column;justify-content: center;align-items: center;"><div class="title" style="margin-bottom: 50px;margin-top: 10px;font-size: 18px;">裁剪预览</div><!-- 3.两个用于预览的div --><div class="previewBox"></div></div></div><div class="layui-row modal_footer"><button type="button" class="layui-btn layui-btn-normal" id="submit">确认提交</button><button type="button" class="layui-btn layui-btn-primary" id="closeLayer">取消</button></div></form></div></div></div><script src="../../layuiadmin/layui/layui.all.js"></script><script src="../utils.js"></script><script src="../jquery-1.10.2.js"></script><script type="text/javascript" src="../../cropper/cropper.js"></script><script>closeLayer();// 关闭当前弹窗// var val = GetQueryString("val");var fileName = decodeURI(GetQueryString("fileName"));// var fileName = JSON.parse(window.sessionStorage.getItem('fileData')).name;var val = window.sessionStorage.getItem('coverImage');document.querySelector('#cropImg').src = val;$('#cropImg').cropper({aspectRatio: 1 / 1,viewMode: 1,// modal: false,//黑色模态minContainerWidth: 500, //容器最小的宽度minContainerHeight: 500, //容器最小的高度dragMode: 'move', //设置裁剪框为可以移动preview: [document.querySelector('.previewBox')],//预览crop: function (e) {// console.log(e);}});$("#submit").on("click", function () {// console.log($('#cropImg').cropper('getCroppedCanvas'));var cas = $('#cropImg').cropper('getCroppedCanvas', {width: 160,height: 90,minWidth: 256,minHeight: 256,maxWidth: 4096,maxHeight: 4096,fillColor: '#fff',imageSmoothingEnabled: false,imageSmoothingQuality: 'high',});// 上传cas.toBlob(function (blob) {console.log('生成Blob的图片格式', blob); //生成Blob的图片格式// 裁剪后的 blob 地址console.log(URL.createObjectURL(blob));var formData = new FormData()var fileOfBlob = new File([blob], fileName);// console.log('fileOfBlob', fileOfBlob);formData.append("file", fileOfBlob);// console.log('formData', formData);var loadIcon1 = layer.load(2);$.ajax({url: contextPath + '/AliOssUpload',type: "POST",data: formData,cache: false,processData: false,contentType: false,//避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件success: function (res) {layer.close(loadIcon1);if (res.rt == 0) {let url = res.datacoverImageUrl = url;let a = parent.setImg(url);//注意这里调用父层的JS 实现传值var index = parent.layer.getFrameIndex(window.name);//获取当前层parent.layer.close(index);//关闭当前层return false;} else if (res.rt == -1) {//错误信息layer.open({title: '错误信息',icon: 2,content: res.msg});}}});})})</script>
</body></html>
相关文章：
cropper+jq（图片裁剪上传）
<link rel"stylesheet" href"../../cropper/cropper.css"> <script type"text/javascript" src"../../cropper/cropper.js"></script> 没有引入jquery的原因 引入jquery <script src"../jquery-1.10.2.js…...
运行 `npm install` 时的常见问题与解决方案
运行 npm install 时的常见问题与解决方案 问题一：网络连接问题 描述： 运行 npm install 时，可能会遇到网络连接问题，导致无法正常下载依赖包。 报错示例： npm ERR! network connection timed outnpm ERR! connect…...
【2023年11月第四版教材】软考高项极限冲刺篇笔记（1）
1 你要接受一些观点 1、不明白的不要去试图理解了，死记硬背 2、要快速过知识点，卡住是不行的，慢也是没有任何作用的。 3、将厚厚的知识，变为薄薄的重点。标红必背 4、成熟度等级，很多知识领域都有，就是评价在一个领域达到的级别。 5、记得搜一下当年的高频科技词汇 6、选…...
http post协议发送本地压缩数据到服务器
1.客户端程序 import requests import os # 指定服务器的URL url "http://192.168.1.9:8000/upload"# 压缩包文件路径 folder_name "upload" file_name "test.7z" headers {Folder-Name: folder_name,File-Name: file_name } # 发送POST请求…...
系列十三、Redis的哨兵机制
一、概述 Sentinel（哨兵）是Redis的高可用解决方案，由一个或者多个Sentinel实例组成集群，可以监视任意多个主服务器，以及这些服务器下属的所有从服务器，并在被监视的主服务器下线或者宕机时，自动…...
设置Unity URP管线中的渲染开关
在上一节中，我们添加了外轮廓线，但这个外轮廓线在所有使用该Shader的网格上是始终存在的。 如果我们想做一个开关，决定是否打开外轮廓线时，我们可以使用一个新的Uniform bool值，然后判断bool是否为true来开启外轮廓线…...
神器抓包工具 HTTP Analyzer v7.5 的下载，安装，使用，破解说明以及可能遇到的问题
文章目录 1、HTTP Analyzer 工具能干什么？2、HTTP Analyzer 如何下载？3、如何安装？4、如何使用？5、如何破解？6、Http AnalyzerStd V7可能遇到的问题 1、HTTP Analyzer 工具能干什么？ A1：HTTP A…...
虚幻引擎：代理
一、代理类型 1.单薄代理 特点：允许有返回值，允许有参数，只可以一对一的传递消息就算绑定多个，但是总会被最后一个覆盖 2.多播代理 特点：不允许有返回值，允许有参数允许一对多传递消息 3.动态代理 …...
Openssl数据安全传输平台004：Socket C-API封装为C++类 / 服务端及客户端代码框架和实现
文章目录 0. 代码仓库1. 客户端C API2. 客户端C API的封装分析2.1 sckClient_init()和sckClient_destroy()2.2 sckClient_connect2.3 sckClient_closeconn()2.4 sckClient_send()2.5 sckClient_rev()2.6 sck_FreeMem 3. 客户端C API4. 服务端C API5. 服务端C6. 客户端和服务端代…...
网络协议--Traceroute程序
8.1 引言 由Van Jacobson编写的Traceroute程序是一个能更深入探索TCP/IP协议的方便可用的工具。尽管不能保证从源端发往目的端的两份连续的IP数据报具有相同的路由，但是大多数情况下是这样的。Traceroute程序可以让我们看到IP数据报从一台主机传到另一台主机所经过…...
Centos磁盘问题小纪
场景说明 放个windows的图片镇楼，在给一个centos的来说明问题，咋了，好好的系统，啥也不能干了 来先上一波命令分析下问题 查看挂载 mount 重新挂载数据 mount -o remount, rw / 查看磁盘 df -h 查看分区挂载详情 rw读写权限 mount …...
计算机网络第三章习题
1.假定1km长的CSMA/CD网络的数据率为1Gb/s。设信号在网络上的传播 速率为200000km/s。求能够使用此协议的最短帧长. 问题刨析: 逻辑链: 最短帧长数据传输率x争用期2τ(2倍端到端所需要的时间) 题目已经给出数据率为1Gb/s,所以我们要知道争用期2τ是多少. 端到端所需要的时间信…...
Layui弹出层关闭后页面自动刷新的用法以及建议
首先在HTML中定义一个查询按钮 <div class"layui-inline"><button class"layui-btn" id"searchBtn" lay-submit lay-filter"data-search-btn" > <i class"layui-icon layui-icon-search">查询</i&…...
PHP 在线考试管理系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp
一、源码特点 PHP 在线考试管理系统是一套完善的web设计系统 layUI技术布局 ，对理解php编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。 PHP 在线考试系统1 代码 https://download.csdn.net/download/qq_41…...
【茫茫架构路】1. Class File字节码文件解析
本文所有内容的JDK版本为 OpenJDK 11 JDK11 Class File官方说明。 Java解析字节码文件源码参考，以下为部分字节码解析源码展示。 public ClassFile(DataInputStream in) {try {//magic: 0xCAFEBABEthis.magic ClassReader.readInt(in);System.out.println("m…...
Golang笔记
01 = 和 := 的区别？ 前者是赋值变量，后者是定义变量 02 指针的作用 指针指向变量的地址，在64位机器上占8个字节 【1 字节（Byte）= 8 位（bit） 1 千字节（KB，Kilobyte）= 1,024 字节（2^10 字节）】 作用 取址然后取值swap函数 交换变量的值指针接收器来改变结构体里面…...
在Linux上安装RStudio工具并实现本地远程访问【内网穿透】
文章目录 前言1. 安装RStudio Server2. 本地访问3. Linux 安装cpolar4. 配置RStudio server公网访问地址5. 公网远程访问RStudio6. 固定RStudio公网地址 前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE，并通过 Web 浏览器进行访问…...
leetcode 128. 最长连续序列
2023.10.23 本题思路：遍历所有元素，对当前元素num进行查找：有无元素(num1)、有无元素(num2)......若有则继续查找下去，同时记录最大序列长度，无则遍历下一个元素。 考虑到数组中可能有重复元素需要去重，并且…...
k8s-----4、yaml文件，做资源编排和资源对象部署
yaml文件 1、YAML 文件概述2、YAML 文件书写格式3、资源清单描述方法4、yaml文件编写4.1 没有真正部署资源的过程4.2 资源已经存在的时候 5、yaml文件中必须存在的属性 1、YAML 文件概述 k8s 集群中对资源管理和资源对象编排部署都可以通过声明样式（YAML࿰…...
proteus中仿真arduino的水位测试传感器
一、原理介绍 我们这里使用的水位传感器，只能说是一个小实验用途的水位传感器。我们首先上图 如上图所示，线没有连接，传感器由许5对裸露在外的铜线片作为传感部分，当浸入水中时这些铜线片会被水桥接。 这些被水连接起来的铜线&a…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
莫兰迪高级灰总结计划简约商务通用PPT模版
莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
)
GitHub 趋势日报 (2025年06月06日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...
2.2.2 ASPICE的需求分析
ASPICE的需求分析是汽车软件开发过程中至关重要的一环，它涉及到对需求进行详细分析、验证和确认，以确保软件产品能够满足客户和用户的需求。在ASPICE中，需求分析的关键步骤包括： 需求细化：将从需求收集阶段获得的高层需…...
解密鸿蒙系统的隐私护城河：从权限动态管控到生物数据加密的全链路防护
摘要 本文以健康管理应用为例，展示鸿蒙系统如何通过细粒度权限控制、动态权限授予、数据隔离和加密存储四大核心机制，实现复杂场景下的用户隐私保护。我们将通过完整的权限请求流程和敏感数据处理代码，演示鸿蒙系统如何平衡功能需求与隐私安…...
claude3.7高阶玩法，生成系统架构图，国内直接使用
文章目录 零、前言一、操作指南操作指导 二、提示词模板三、实战图书管理系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 在线考试系统通过4o模型生成系统描述通过claude3.7生成系统架构图svg代码转换成图片 四、感受 零、前言 现在很多AI大模型可以…...