微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

利用imgareaselect辅助后台实现图片上传裁剪

分类：JavaScript作者：编程之家

因为项目当中用到图片裁剪，本来可以不用到后台进行裁剪的，但是要兼容万恶的IE浏览器，所以不得不使用后台进行裁剪。

这次使用到插件获取需要裁剪区域的坐标，再由后台进行裁剪操作。先上个效果图再说

但是这里有一个坑就是上传的图片过大，可能会造成裁剪的区域跟插件中显示的不一样，所以得现在后台对云图片进行压缩在裁剪。

=1,缩略图height=comBase,width按原图宽高比例;若scale<1,缩略图width=comBase,height按原图宽高比例 * @throws Exception

*/
public static void saveMinPhoto(String srcURL,String deskURL,double comBase,double scale) throws Exception {
File srcFile = new java.io.File(srcURL);
String ext = srcURL.substring(srcURL.lastIndexOf(".") + 1);
Image src = ImageIO.read(srcFile);
int srcHeight = src.getHeight(null);
int srcWidth = src.getWidth(null);
int deskHeight = 0;// 缩略图高
int deskWidth = 0;// 缩略图宽
double srcScale = (double) srcHeight / srcWidth;
/*缩略图宽高算法/
if ((double) srcHeight > comBase || (double) srcWidth > comBase) {
if (srcScale >= scale || 1 / srcScale > scale) {
if (srcScale >= scale) {
deskHeight = (int) comBase;
deskWidth = srcWidth deskHeight / srcHeight;
} else {
deskWidth = (int) comBase;
deskHeight = srcHeight deskWidth / srcWidth;
}
} else {
if ((double) srcHeight > comBase) {
deskHeight = (int) comBase;
deskWidth = srcWidth deskHeight / srcHeight;
} else {
deskWidth = (int) comBase;
deskHeight = srcHeight deskWidth / srcWidth;
}
}
} else {
deskHeight = srcHeight;
deskWidth = srcWidth;
}
BufferedImage tag = new BufferedImage(deskWidth,deskHeight,BufferedImage.TYPE_3BYTE_BGR);
tag.getGraphics().drawImage(src,deskWidth,null); //绘制缩小后的图
FileOutputStream deskImage = new FileOutputStream(deskURL); //输出到文件流
ImageIO.write(tag,ext,new File(deskURL));
deskImage.close();
}

这就是压缩之后在进行裁剪了，好了上完整代码先

<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>头像 nofollow" type="text/css">
Box">
上传头像
display: block; overflow: hidden; margin: 30px auto; ">

<div id="preview" style="width: 100px; height: 100px; overflow: hidden; float: left;">
<img src="" style="width: 100px; height: 100px;" id="smallImage"/>

图片
imgurl" type="hidden"> 上传" class="input_SC" onclick="upold();">

<include src="../common/user_footer.html">

js 代码

rush:js;"> function preview(img,selection) { if (!selection.width || !selection.height) return;

var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;

$('#preview img').css({
width: Math.round(scaleX 300),height: Math.round(scaleY 300),marginLeft: -Math.round(scaleX selection.x1),marginTop: -Math.round(scaleY selection.y1)
});

$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}

$(function () {

});

//上传原始图片
function uplodImage(target) {
if(checkImage(target)){
var url = httpUtils.rootPath+'/component/upload.do';
$.ajaxFileUpload({
url: url,//用于文件上传的服务器端请求地址
secureuri: false,//是否需要安全协议，一般设置为false
fileElementId: 'uplodimage',//文件上传域的ID
dataType: 'json',//返回值类型 一般设置为json
success: function (data) //服务器成功响应处理函数
{
var filePath = data.filePath;
$('#photo').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath);
$('#smallImage').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath);
$('#imgurl').val(filePath);
$('#photo').imgAreaSelect({
aspectRatio: '1:1',x1: 50,y1: 50,x2: 241,y2: 241,handles: true,fadeSpeed: 200,onSelectChange: preview
});
$('#x1').val("50");
$('#y1').val("50");
$('#x2').val("241");
$('#y2').val("241");
$('#w').val("191");
$('#h').val("191");
}
});
}

}

//上传裁剪后的图片
function upold() {

if($('#imgurl').val()==''){
layer.alert("请先选择图片在上传");
return false;
}

$.ajax({
type: "post",url:httpUtils.rootPath+'/user/setHeadPicture',beforeSend: function(request) {
request.setRequestHeader("jmtcp",header);
},async:false,data: {
x:$('#x1').val(),y:$('#y1').val(),width: $('#w').val(),imgurl : $('#imgurl').val(),heigth: $('#h').val()
},dataType: "json",success: function(data){
if(data.code==1){ 

          layer.alert(data.message,function(){ 
            window.location.href = '../user/grzy.html'; 
          }); 
        }else{ 
          layer.alert(data.message); 
        } 
       } 
 });

}

function checkImage(target) {
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var fileSize = 0;
var filepath = target.value;
// 为了避免转义反斜杠出问题，这里将对其进行转换
var re = /(+)/g;
var filename = filepath.replace(re,"#");
// 对路径字符串进行剪切截取
var one = filename.split("#");
// 获取数组中最后一个，即文件名
var two = one[one.length - 1];
// 再对文件名进行截取，以取得后缀名
var three = two.split(".");
// 获取截取的最后一个字符串，即为后缀名
var last = three[three.length - 1];
// 添加需要判断的后缀名类型
var tp = "jpg,gif,bmp,JPG,GIF,BMP,png";
// 返回符合条件的后缀名在字符串中的位置
var rs = tp.indexOf(last);
// 如果返回的结果大于或等于0，说明包含允许上传的文件类型
if(rs < 0){
layer.alert('您选择的上传文件不是有效的图片文件');
return false;
}
// if (isIE && !target.files) { // IE浏览器
// var filePath = target.value; // 获得上传文件的绝对路径
// var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
// // GetFile(path) 方法从磁盘获取一个文件并返回。
// var file = fileSystem.GetFile(filePath);
// fileSize = file.Size; // 文件大小，单位：b
// }
// else { // 非IE浏览器
// fileSize = target.files[0].size;
// }
var img1 = document.getElementById('photo');
//img1.dynsrc=target.value;
//img1.fileSize：IE ， fileObj.files[0].fileSize：chrome， fileObj.files[0].size：FF
var fileSize = img1.fileSize || target.files[0].fileSize || target.files[0].size;
var size = fileSize / 1024 / 1024;
if (size > 5) {
layer.alert("图片不能大于5M");
return false;
}
return true;
}

后台代码

rush:java;"> public class CutimageUtils { public static SecureRandom rnd = new SecureRandom();

public static String cutimage(int x,int y,int width,int height,String srcPath) throws Exception{
String root = ApplicationContext.getProperty("upload_folder");
String imagePath = root+srcPath;
FileInputStream is = null;
ImageInputStream iis = null;
String uploadFolder = null ;
String filepath = null ;
String serverName = null ;
uploadFolder = ApplicationContext.getProperties().getProperty("upload_folder").toString() ;
filepath = generateServerFolder() ;
serverName = generateServerName(srcPath) ;
File file = new File(uploadFolder + filepath);
if (!file.exists()) {
file.mkdirs();
} 

 try { 
  // 读取<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>  
  saveMinPhoto(imagePath,imagePath,300,0.9d); 
   //resetsize(imagePath,imagePath); 
  is = new FileInputStream(imagePath); 
  String ext = srcPath.substring(srcPath.lastIndexOf(".") + 1);  
   I<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>tor<ImageReader> it = ImageIO.ge<a href="https://www.jb51.cc/tag/timage/" target="_blank" class="keywords">timage</a>ReadersByFormatName(ext);  
   ImageReader reader = it.next();  
  // <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>流  
   iis = ImageIO.createImageInputStream(is);  
   reader.setInput(iis,true);  
   ImageReadP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m = reader.getDefaultRead<a href="https://www.jb51.cc/tag/param/" target="_blank" class="keywords">param()</a>;  
   /**  
     *  
     * <a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>裁剪区域。Rectangle 指定了坐标空间中的<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>区域，通过 Rectangle 对象  
     *  
     * 的左上顶点的坐标(x，y)、宽度和高度可以定义这个区域。  
     */  
   Rectangle rect = new Rectangle(x,y,width,height);  

    // 提供<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a> BufferedImage，将其用作解码像素数据的目标。  
   p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m.setSourceRegion(rect);  
   BufferedImage bi = reader.read(0,p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m);  
   // 保存新<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>  
   ImageIO.write(bi,new File(uploadFolder + filepath + serverName));  
} catch (FileNotFoundException e) { 
  // T<a href="https://www.jb51.cc/tag/odo/" target="_blank" class="keywords">odo</a> Auto-generated catch block 
  if (is != null)  
    is.close();  
  if (iis != null)  
    iis.close();  
  e.<a href="https://www.jb51.cc/tag/printstacktrace/" target="_blank" class="keywords">printstacktrace</a>(); 
}  
 return filepath + serverName ;

} 

/**
  • @param config
  • @param file
  • @param request
  • @return
    */
    public static String generateServerName(String clientPath) {
    //按当前时间的分钟毫秒+3位随机数
    Calendar c = Calendar.getInstance();
    String min = get(c,Calendar.MINUTE);
    String sec = get(c,Calendar.SECOND);
    String mis = get(c,Calendar.MILLISECOND);
    String rnd = random();
    String ext = getFileExt(getClientName(clientPath)); 
return min + sec + mis + rnd + ext ;

}

/* 客户端文件名 /
public static String getClientName(String clientPath) {
if(null != clientPath){
int index1 = clientPath.lastIndexOf("/");
int index2 = clientPath.lastIndexOf("\");
if(index2 > index1){
index1 = index2;
}
return clientPath.substring(index1+1,clientPath.length());
}
return null;
}

public static String getFileExt(String fileName){
if(null != fileName){
int dot = fileName.lastIndexOf(".");
if(dot >= 0){
return fileName.substring(dot);
}
}
return "";
}

public static String random(){
String value = String.valueOf(rnd.nextInt(1000));
if(value.length() < 3){
for(int i=value.length();i<3;i++){
value = "0" + value;
}
}
return value;
}

public static String generateServerFolder() {
//按当前年月日和小时生成文件路径
Calendar c = Calendar.getInstance();
String year = get(c,Calendar.YEAR);
String mon = get(c,Calendar.MONTH);
String day = get(c,Calendar.DAY_OF_MONTH);
String hour = get(c,Calendar.HOUR_OF_DAY); 

return year + "/" + mon + "/" + day + "/" + hour + "/";

}

public static String get(Calendar c,int field){
int v = c.get(field);
if(field == Calendar.MONTH){
v += 1;
}
String value = String.valueOf(v);
if(value.length() == 1){
value = "0" + value;
}
return value;
}

/**

  • 缩小图片到固定长高
  • @param srcImagePath 读取图片路径
  • @param toImagePath 写入图片路径
  • @param width 缩小后图片宽度
  • @param height 缩小后图片长度
  • @throws IOException
    */
    public static void reduceImageByWidthHeight(String srcImagePath,String toImagePath,int height) throws IOException{
    FileOutputStream out = null;
    try{
    //读入文件
    File file = new File(srcImagePath);
    String ext = srcImagePath.substring(srcImagePath.lastIndexOf(".") + 1);
    // 构造Image对象
    BufferedImage src = javax.imageio.ImageIO.read(file);
    // 缩小边长
    BufferedImage tag = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    // 绘制缩小后的图片
    tag.getGraphics().drawImage(src,null);
    out = new FileOutputStream(toImagePath);
    ImageIO.write(tag,new File(toImagePath));
    }catch(Exception e){
    e.printStackTrace();
    }finally{
    if(out != null){
    out.close();
    }
    out = null;
    System.gc();
    }
    }

/**

  • 等比例压缩算法：
  • 算法思想：根据压缩基数和压缩比来压缩原图，生产一张图片效果最接近原图的缩略图
  • @param srcURL 原图地址
  • @param deskURL 缩略图地址
  • @param comBase 压缩基数
  • @param scale 压缩限制(宽/高)比例 一般用1：
  • 当scale>=1,new File(deskURL));
    deskImage.close();
    }

public static void main(String[] args) {
try {
String src = CutimageUtils.cutimage(11,12,100,"2017/01/04/17/6348162d-5b50-4e7d-b414-93140498f8de.jpg");
System.out.println(src);
} catch (Exception e) {
// Todo Auto-generated catch block
e.printstacktrace();
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/js/41145.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

imgareaselect上传裁剪imgareaselect图片上传裁剪imgareaselect图片裁剪

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot