移动端图片裁剪上传—jQuery.cropper.js

jQuery.cropper.js是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用。

一、移动端获取本地相册兼容

安卓:<input type="file" accept="image/*" capture="camera" >

ios:<input type="file" accept="image/*">

<input type="file" accept="image/*" capture="camera" class="js_upFile">
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf(‘iphone‘) != -1  || agent.indexOf(‘ipad‘) != -1 ){
      $(‘.js_upFile‘).removeAttr("capture");}

二、判断图片格式

function check_Image_Format(value)
{
      var regexp = new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png|.svg|.gif|.bmp)$",‘g‘);
      return regexp.test(value);}

三、获取图片文件的url

function get_File_Url(file) {
      var url == null;
      if (window.createObjectURL) {
            url = window.createObjectURL(file) ;
      } else if (window.URL) {
            url = window.URL.createObjectURL(file) ;
      } else if (window.webkitURL) {
            url = window.webkitURL.createObjectURL(file) ;
      }
      return url ;
}
                      

四、图片预览

图片预览容器:<img src="" id="previewImg" />

$(‘.js_upFile‘).change(function () {
      if(!check_Image_Format(this.value)){
              alert(‘格式错误!‘);
              return;
      }
      var objUrl = get_File_Url(this.files[0]);
      if (objUrl)
      {
              //预览图片
           var previewImg = $("#previewImg");
              previewImg.attr("src",objUrl);    }
}

五、cropper.js裁剪

//初始化裁剪插件cropper.js
 previewImg.cropper({
    dragMode: ‘move‘,//拖拽模式
       aspectRatio: 1,//设置剪裁容器的比例
       viewMode: 1//视图模式
});
cropper = previewImg.data(‘cropper‘).getCroppedCanvas();

获取到canvas绘制的剪裁图像之后,你可以直接将canvas作为图片显示,或使用 canvas.toDataURL() 方法获取图像的数据链接(base64格式),或者使用 canvas.toBlob() 方法获取一个blob。

六、上传图片

1、通过ajax上传图片,需要利用 FormData 对象:

var fd = new FormData();
fd.append(‘uploadfile‘, file);
$.ajax({
    url: ‘‘,
       type: ‘post‘,
       data: fd,
       cache: false, //不需要缓存
       processData: false, //不要去处理发送的数据
       contentType: false //不要去设置Content-Type请求头
}).then(function(res){
    ...
});

2、通过form上传图片:

<form action="" method="" enctype="multipart/form-data">
    ...
</form>

注意:裁剪完图片后(图片上传成功、或者取消)需要销毁已经生成的cropper实例,否则一直存在于裁剪框内影响下一张图片的裁剪:$("#previewImg").cropper(‘destroy‘);

七、图片转化为文件

最后一个重点就是如何将已经裁剪好的图片转化为一个文件呢?上面已经通过插件得到了canvas绘制的剪裁图像,需要进行一系列转化形成我们最终需要的文件。

1、通过 canvas.toDataURL() 方法获取图像的数据链接(base64格式),然后将 base64编码转成file文件;

function base64_To_File(b64Data, filename) {
    var block = b64Data.split(‘;‘);
       var contentType = block[0].split(‘:‘)[1];
       var data = block[1].split(‘,‘)[1];    var len = data.length;
       var u8arr = new Uint8Array(len);
       for(var i = 0; i < len; i++){
           u8arr[i] = data.charCodeAt(i);
       }
       return new File([u8arr], filename, {type: contentType});
}

但是这种方法ios低版本不兼容,最好的方法是:base64——>blob ——> file;

2、base64——>blob ——> file

function base64_To_File(b64Data, filename) {
    var block = b64Data.split(‘;‘);
       var contentType = block[0].split(‘:‘)[1];
       var data = block[1].split(‘,‘)[1];    var len = data.length;
       var u8arr = new Uint8Array(len);
       for(var i = 0; i < len; i++){
           u8arr[i] = data.charCodeAt(i);
       }
       var blob = new Blob([u8arr], {type: contentType});
       return new File([blob], filename , {type: contentType});
}

3、通过 canvas.toBlob(function(blob){console.log(blob);}) 方法直接获取blob对象(类似文件对象),详解见: https://segmentfault.com/a/1190000011563430?utm_source=tag-newest

原文地址:https://www.cnblogs.com/kiko-2/p/10273568.html

时间: 2024-11-05 12:06:34

移动端图片裁剪上传—jQuery.cropper.js的相关文章

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看看核心代码: post的是base64,后端处理base64转存图片. 1 $("#clipArea").photoClip({ 2 width: 200, 3 height: 200, 4 file: "#file", 5 view: "#view"

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla

vue中使用cropperjs进行图片裁剪上传

下面代码直接就可以复制使用了,但是需要在本地下个cropperjs,下载命令:npm install cropperjs --save-dev <template> <div id="yin"> <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel"> <div> <img

图片裁剪上传Jcrop

<link rel="stylesheet" href="../css/jquery.Jcrop.css"> <script src="../js/jquery.Jcrop.js"></script> 先是两个必不可少的东西 <style type="text/css"> /* Apply these styles only when #preview-pane has been

图片裁剪上传插件——jquery.photoClip.js

想要裁剪图片上传: 需要依赖的的插件为: [jquery.photoClip.js] 插件[iscroll-zoom.js] 插件[hammer.js] 插件 [lrz.all.bundle.js] 插件 [jquery-2.1.3.min.js] 在前端页面调取: <div id="clipArea"></div> <input type="file" id="file"> <button id=&qu

使用spring mvc+localResizeIMG实现HTML5端图片压缩上传

最近在做一个移动端HTML5的应用,使用到了上传功能,起初使用传统的上传方式上传手机拍照的照片,由于手机拍照出来的照片一般都是好几MB, 所以上传速度是非常慢的. 在网上找了很久找到了localResizeIMG压缩框架,感觉非常的实用,所以在此分享给大家. 第一步:下载localResizeIMG localResizeIMG放在github中的,地址是:https://github.com/think2011/localResizeIMG. 第二步:在web工程中导入localResizeI

移动端图片压缩上传解决方案

最近做移动端图片上传,发现图片尤其是iPhone拍照的图片都有2M左右,但是实际上项目中用不到这么大,于是想到要用js在前台进行压缩. 解决方案如下: [一]获取图片数据 先是获取图片数据,也就是监听input file的change事件,然后获取到上传的文件对象files,将类数组的files转成数组,然后进行forEach遍历. 接着判断文件类型,如果不是图片则不作处理.如果是图片就实例化一个filereader,以base64格式读取上传的文件数据,判断数据长度,如果大于200KB的图片就

ajax图片单个上传(ajaxfileupload.js)

开发过程中发现,页面总是只能存在一个图片,如果有两个图片,或者多个,就没法上传了.比较困惑怎么会有这样的事情呢? 知道今天开发完后我才测试了下,发现同一个页面单个上传N个图都是没有问题的. 下面是实例. http://files.cnblogs.com/bin-pureLife/ajaxupload.zip 发现我上面遇到的问题是不存在,另外看了下实现原理,是通过构造了一个不可见的iframe,然后在发送http请求达成的. 我项目中遇到这种问题的原因. 排查: 这是调用upload前的方法.

文件上传-jquery.uploadify.js

<script type="text/javascript" src="../jquery_uploadify/jquery.uploadify-3.1.min.js"></script> <link type="text/css" rel="stylesheet" href="../jquery_uploadify/uploadify.css"/> <script