cropper.js移动端使用

一、总结

一句话总结:

启示:找对关键词,找对相关方面的应用,效果真的非常好

比如 cropper.js移动端使用,这样设置了(dragMode: 'move',//拖拽模式) 之后,手机端的效果就变的好起来了

1、cropper.js移动端设置?

dragMode: 'move',//拖拽模式

2、移动端打开相册?

accept属性,值为image/*

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

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

转自或参考:移动端图片裁剪上传—jQuery.cropper.js
https://www.cnblogs.com/kiko-2/p/10273568.html

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

// Blob 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 ;
} // Data URL格式(base64编码)
function get_File_Url(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
       ...
       previewImg.attr("src",e.target.result);  
    }
}

四、图片预览

图片预览容器:<img src="" alt="" 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
}).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

 

cropper.js移动端使用的更多相关文章

  1. cropper.js 二次开发:截图并下载图片

    cropper.js 是一个基于jquery的图片截取库. 参考:https://blog.csdn.net/weixin_38023551/article/details/78792400 我的代码 ...

  2. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  3. ASP.NET Core 与 Vue.js 服务端渲染

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  4. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  5. 上传图片截图预览控件不显示cropper.js 跨域问题

    上传图片到图片服务器,因为域名不同,多以会有跨域问题. No 'Access-Control-Allow-Origin' header is present on the requested reso ...

  6. Vue中使用Cropper.js裁剪图片

    Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuan ...

  7. 图片裁剪 cropper.js 上传组件封装 vue

    //HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...

  8. node.js服务端程序在Linux上持久运行

    如果要想在服务端部署node.js程序,让其持久化运行,就不能单单使用npm start命令运行,当然了,这样运行是毫无问题的,但是当关闭xshell窗口或者是关闭进程的时候(其实关闭xshell窗口 ...

  9. Cropper.js使用笔记

    官网:https://fengyuanchen.github.io/cropperjs/ github:https://github.com/fengyuanchen/cropperjs 由于文档不好 ...

随机推荐

  1. viewer 图片点击放大 用法汇总

    A 不用viewer插件 1弹出框 https://www.cnblogs.com/web1/p/8989967.html 2表格中 https://www.jianshu.com/p/c17f4f6 ...

  2. Centos7机器信息查看

    1.查看Linux信息 1.1查看32位或64位 uname -a 1.2查看内核版本 cat /proc/version 1.3查看发行版 cat /etc/centos-release 2.查看内 ...

  3. 在Linux主机使用命令行批量删除harbor镜像

     在Linux主机使用命令行批量删除harbor镜像 脚本使用说明: 此脚本不是万能脚本,根据自身环境要调整很多 能用harbor的域名就不要用IP 脚本前半部分可以套用,后半部分需一步一步试错,结合 ...

  4. linux系统编程之文件与io(四)

    今天继续学习文件与io,主要是学习文件共享及文件.复制文件描述符,有点抽象,主要是概念上的理解,但是很重要,下面一一来分解: 文件共享: 回顾一下,在linux系统调用中,是通过文件描述符来访问文件的 ...

  5. 检查SQL Server数据库各个库表空间使用的方法

    /*创建一张表:表名Data,列名:表名,列数,预留空间,数据占用空间,索引占用空间,剩余空间*/ CREATE TABLE Data ( 表名 ), 列数 ), 预留空间 ), 数据占用空间 ), ...

  6. 51nod 2488 矩形并的面积

    在二维平面上,给定两个矩形,满足矩形的每条边分别和坐标轴平行,求这个两个矩形的并的面积.即它们重叠在一起的总的面积. 收起   输入 8个数,分别表示第一个矩形左下角坐标为(A,B),右上角坐标为(C ...

  7. unsupervised learning: clustering介绍

    unsupervised learning 上面是监督学习与无监督学习的比较,监督学习的training set是一组带label(y)的训练集,而无监督学习不带有label(y). 上图中的监督学习 ...

  8. 使用lua脚本在nginx上进行灰度流量转发

    参考资料 idea+openresty+lua开发环境搭建 OpenResty最佳实践 灰度发布基于cookie分流 从请求中获取值 -- 从请求中获取请求头为 Sec-WebSocket-Proto ...

  9. go socket 服务端处理多用户

    package main import ( "fmt" "net" "strings") func main() { listener, e ...

  10. django 时间格式(全局修改,不用过滤器)

    百度了一圈,很没创意的用过滤器,前端每次显示时间表格都要用过滤器,这种挺烦的.隐约记得以前见过没有用过滤器的.换google https://stackoverflow.com/questions/5 ...