欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何使用js插件Jcrop自定义截取图片功能

来源:本站整理 作者:佚名 时间:2016-11-13 TAG: 我要投稿

当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求。参照一些项目,和同事的改造,终于是像点样子了。
截图大致截为3个像素,每个像素使用的地方也不同,考虑图片不会是很多,分别压缩保存下来。
根据截取的像素位置,对应的压缩成相应的图片:

首先需要下载Jcrop.js与uploadify.js 上传图片的插件和截图的插件
Comm_UploadJcrop.js
//剪裁头像对象和宽高比例
var jcrop_api, boundx, boundy;
//上传图片
//Id:上传控件Id
//IsShowProgress:是否需要展示进度条
//SuccessFunc: 上传成功执行的方法
function UploadImg(Id, IsShowProgress, SuccessFunc,IsJcrop) {
 var uploadObj = $("#" + Id);
 var htmlstr = " + Id + "-queue' " + (IsShowProgress ? "" : "style='display:none;'") + ">";
 uploadObj.parent().append(htmlstr);
 var img_UploadUrl = IsJcrop ? "/Upload/UploadifyHeader" : "/Upload/UploadifyImg"; //Upload控制器中方法
 uploadObj.uploadify({
 //指定swf文件
 'swf': '/Scripts/uploadify/uploadify.swf',//下载uploadify插件中的uploadify.swf
 //后台处理的页面
 'uploader': img_UploadUrl,
 //进度条id
 'queueID': Id + "-queue",
 //进度条显示完成后是否自动消失
 'removeCompleted': false,
 //按钮相关
 'buttonClass': 'btn_Upload',
 'buttonText': '请选择图片',
 'height': '31',
 'width': '108',
 //在浏览窗口底部的文件类型下拉菜单中显示的文本
 'fileTypeDesc': 'Image Files',
 //允许上传的文件后缀
 'fileTypeExts': '*.gif; *.jpg?www.myhack58.com; *.png; *.bmp; *.jpeg; *.svg',
 //选择文件后自动上传
 'auto': true,
 //设置为true将允许多文件上传
 'multi': false,
 'onUploadSuccess': function (file, data, response) {
  if (SuccessFunc != undefined && SuccessFunc != null && SuccessFunc.length > 0) {
  eval(SuccessFunc + "(file,data,response)");
  }
 }
 });
}
//上传文件
//Id:上传控件Id
//IsShowProgress:是否需要展示进度条
//SuccessFunc: 上传成功执行的方法
function UploadFile(Id, IsShowProgress, SuccessFunc) {
 var uploadObj = $("#" + Id);
 var htmlstr = " + Id + "-queue' " + (IsShowProgress ? "" : "style='display:none;'") + ">";
 uploadObj.parent().append(htmlstr);
 uploadObj.uploadify({
 //指定swf文件
 'swf': '/Scripts/uploadify/uploadify.swf',
 //后台处理的页面
 'uploader': '/Upload/Uploadify',
 //进度条id
 'queueID': Id + "-queue",
 //进度条显示完成后是否自动消失
 'removeCompleted': false,
 //按钮相关
 'buttonClass': 'btn_Upload',
 'buttonText': '请选择文件',
 'height': '31',
 'width': '108',
 //上传文件的类型 默认为所有文件
 'All Files': '*.*',
 //在浏览窗口底部的文件类型下拉菜单中显示的文本
 //'fileTypeDesc': 'Image Files',
 //允许上传的文件后缀
 'fileTypeExts': '*.*',
 //选择文件后自动上传
 'auto': false,
 //设置为true将允许多文件上传
 'multi': true,
 'onUploadSuccess': function (file, data, response) {
  if (SuccessFunc != undefined && SuccessFunc != null && SuccessFunc.length > 0) {
  eval(SuccessFunc + "(file,data,response)");
  }
 }
 });
}
//设定图片
function SetJcropImage(url) {
 $(".div_NoFileTip").hide();
 $(".UploadImgContainer").show();
 $("#preview_large").attr("src", url);
 $("#preview_large2").attr("src", url);
 $("#preview_large3").attr("src", url);
 $("#imgsrc").val(url);
 ErealizeJcrop(url);
}
//剪切图片
function ErealizeJcrop(url) {
 var $pcnt = $('#preview_large2').parent(),
 xsize = $pcnt.width(),
 ysize = $pcnt.height();
 $('#preview_large').Jcrop({
 onChange: updatePreview,
 onSelect: updatePreview,
 onSelect: updateCoords,
 aspectRatio: xsize / ysize
 }, function () {
 var bounds = this.getBounds();
 boundx = bounds[0];
 boundy = bounds[1];
 jcrop_api = this;
 // $preview.appendTo(jcrop_api.ui.holder);
 });
 //更换图片时重新加载图片
 if (jcrop_api != undefined)
 jcrop_api.setImage(url);
 function updateCoords(c) {
 $('#x').val(c.x);
 $('#y').val(c.y);

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载