当前位置：首页 > news >正文

cropper+jq（图片裁剪上传）

news 2025/7/14 3:02:54

  <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（图片裁剪上传）

编程日记 2023/10/23 17:40:45

运行 `npm install` 时的常见问题与解决方案

运行 npm install 时的常见问题与解决方案问题一：网络连接问题描述： 运行 npm install 时，可能会遇到网络连接问题，导致无法正常下载依赖包。报错示例： npm ERR! network connection timed outnpm ERR! connect…...

编程日记 2023/10/23 17:39:43

【2023年11月第四版教材】软考高项极限冲刺篇笔记（1）

1 你要接受一些观点 1、不明白的不要去试图理解了，死记硬背 2、要快速过知识点，卡住是不行的，慢也是没有任何作用的。 3、将厚厚的知识，变为薄薄的重点。标红必背 4、成熟度等级，很多知识领域都有，就是评价在一个领域达到的级别。 5、记得搜一下当年的高频科技词汇 6、选…...

编程日记 2023/10/23 17:37:42

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请求…...

编程日记 2023/10/23 17:36:40

系列十三、Redis的哨兵机制

一、概述 Sentinel（哨兵）是Redis的高可用解决方案，由一个或者多个Sentinel实例组成集群，可以监视任意多个主服务器，以及这些服务器下属的所有从服务器，并在被监视的主服务器下线或者宕机时，自动…...

编程日记 2023/10/23 17:35:38

设置Unity URP管线中的渲染开关

在上一节中，我们添加了外轮廓线，但这个外轮廓线在所有使用该Shader的网格上是始终存在的。如果我们想做一个开关，决定是否打开外轮廓线时，我们可以使用一个新的Uniform bool值，然后判断bool是否为true来开启外轮廓线…...

编程日记 2023/10/23 17:34:37

神器抓包工具 HTTP Analyzer v7.5 的下载，安装，使用，破解说明以及可能遇到的问题

文章目录 1、HTTP Analyzer 工具能干什么？2、HTTP Analyzer 如何下载？3、如何安装？4、如何使用？5、如何破解？6、Http AnalyzerStd V7可能遇到的问题 1、HTTP Analyzer 工具能干什么？ A1：HTTP A…...

编程日记 2023/10/23 17:33:36

虚幻引擎：代理

一、代理类型 1.单薄代理特点：允许有返回值，允许有参数，只可以一对一的传递消息就算绑定多个，但是总会被最后一个覆盖 2.多播代理特点：不允许有返回值，允许有参数允许一对多传递消息 3.动态代理 …...

编程日记 2023/10/23 17:31:34

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. 客户端和服务端代…...

编程日记 2023/10/23 17:29:32

网络协议--Traceroute程序

8.1 引言由Van Jacobson编写的Traceroute程序是一个能更深入探索TCP/IP协议的方便可用的工具。尽管不能保证从源端发往目的端的两份连续的IP数据报具有相同的路由，但是大多数情况下是这样的。Traceroute程序可以让我们看到IP数据报从一台主机传到另一台主机所经过…...

编程日记 2023/10/23 17:28:30

Centos磁盘问题小纪

场景说明放个windows的图片镇楼，在给一个centos的来说明问题，咋了，好好的系统，啥也不能干了来先上一波命令分析下问题查看挂载 mount 重新挂载数据 mount -o remount, rw / 查看磁盘 df -h 查看分区挂载详情 rw读写权限 mount …...

编程日记 2023/10/23 17:27:29

计算机网络第三章习题

1.假定1km长的CSMA/CD网络的数据率为1Gb/s。设信号在网络上的传播速率为200000km/s。求能够使用此协议的最短帧长. 问题刨析: 逻辑链: 最短帧长数据传输率x争用期2τ(2倍端到端所需要的时间) 题目已经给出数据率为1Gb/s,所以我们要知道争用期2τ是多少. 端到端所需要的时间信…...

编程日记 2023/10/23 17:26:28

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&…...

编程日记 2023/10/23 17:24:26

PHP 在线考试管理系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp

一、源码特点 PHP 在线考试管理系统是一套完善的web设计系统 layUI技术布局 ，对理解php编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。 PHP 在线考试系统1 代码 https://download.csdn.net/download/qq_41…...

编程日记 2023/10/23 17:23:24

【茫茫架构路】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…...

编程日记 2023/10/23 17:22:23

Golang笔记

01 = 和 := 的区别？前者是赋值变量，后者是定义变量 02 指针的作用指针指向变量的地址，在64位机器上占8个字节【1 字节（Byte）= 8 位（bit） 1 千字节（KB，Kilobyte）= 1,024 字节（2^10 字节）】作用取址然后取值swap函数交换变量的值指针接收器来改变结构体里面…...

编程日记 2023/10/23 17:21:22

在Linux上安装RStudio工具并实现本地远程访问【内网穿透】

文章目录前言1. 安装RStudio Server2. 本地访问3. Linux 安装cpolar4. 配置RStudio server公网访问地址5. 公网远程访问RStudio6. 固定RStudio公网地址前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE，并通过 Web 浏览器进行访问…...

编程日记 2023/10/23 17:20:17

leetcode 128. 最长连续序列

2023.10.23 本题思路：遍历所有元素，对当前元素num进行查找：有无元素(num1)、有无元素(num2)......若有则继续查找下去，同时记录最大序列长度，无则遍历下一个元素。考虑到数组中可能有重复元素需要去重，并且…...

编程日记 2023/10/23 17:19:16

k8s-----4、yaml文件，做资源编排和资源对象部署

yaml文件 1、YAML 文件概述2、YAML 文件书写格式3、资源清单描述方法4、yaml文件编写4.1 没有真正部署资源的过程4.2 资源已经存在的时候 5、yaml文件中必须存在的属性 1、YAML 文件概述 k8s 集群中对资源管理和资源对象编排部署都可以通过声明样式（YAML&#xff0…...

编程日记 2023/10/23 17:17:15

proteus中仿真arduino的水位测试传感器

一、原理介绍我们这里使用的水位传感器，只能说是一个小实验用途的水位传感器。我们首先上图如上图所示，线没有连接，传感器由许5对裸露在外的铜线片作为传感部分，当浸入水中时这些铜线片会被水桥接。这些被水连接起来的铜线&a…...

编程日记 2023/10/23 17:16:14

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2025/7/12 0:50:41

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/21 5:42:11

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/7/14 0:09:52

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分）《Learning Humanoid Standing-up Control across Diverse Postures》系列文章：论文深度解读 + 算法与代码分析（二）作者机构：上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学论文主题：人形机器人…...

编程新知 2025/6/17 5:29:50

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20