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…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2
每日一言 今天的每一份坚持，都是在为未来积攒底气。 案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。 工具截图 主要特点 🚀 快速转换：本地转换，无需等待上…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机，点进去 点进去 查看URL，有 ?fileflag.php说明存在文件包含，原理是php://filter 协议 当它与包含函数结合时，php://filter流会被当作php文件执行。 用php://filter加编码，能让PHP把文件内容…...