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…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？
Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求，并检查收到的响应。它以以下模式之一…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...