jQuery头像图片上传插件,可裁剪

所属分类:媒体,输入-图像,上传

 33356  212  查看评论 (160)
jQuery头像图片上传插件,可裁剪 ie兼容10
//上传封面
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [428, 321], // 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [428, 321], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
    file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
    view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
    loadStart: function() {
        // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
        $('.cover-wrap').fadeIn();
        console.log("照片读取中");
    },
    loadComplete: function() {
        // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
        console.log("照片读取完成");
    },
    //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {
        // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
        $('.cover-wrap').fadeOut();
        $('#view').css('background-size', '100% 100%');
        console.log(dataURL);
    }
});
//clipArea.destroy();
//这是我项目中用到的,我将之提了出来
相关插件-图像,上传

jQuery切图插件(原创)

基于jQuery实现的类似ps切图工具
  图像
 2394  23

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 9081  32

jQuery图片裁剪插件Cropit

Cropit 是款自定义裁剪和缩放图像的jQuery插件
  图像
 18028  48

可视化的交互图形库Cytoscape.js

Cytoscape.js ? 用于数据分析和可视化的交互图形库
  图像
 23413  50

讨论这个项目(160)回答他人问题或分享插件使用方法奖励jQ币

    小莫?? 0
    2018/7/12 17:08:31
    看起来好厉害的样子 回复
    别闹了i 0
    2018/7/10 16:42:44
    貌似一个页面当中不能使用两次 回复
    海日一山盟 0
    2018/7/9 16:00:48
    貌似一个页面当中不能使用两次 回复
    #ζ  思维没逻辑。 0
    2018/7/4 16:44:50
    为什么 放在form标签中 就会报错 放在form外 一切正常 回复
    -_-|| 0
    2018/5/19 14:42:52
    safetye 0
    2018/5/15 14:24:27
    pengjunlee 0
    2018/5/11 20:01:53
    想下载,没有jq币
        芦伟0
        2018/5/13 0:43:19
        可怜
    回复
    flm 0
    2018/5/3 17:26:41
    把它放到表单里面会自动提交表单 回复
    几分中意 0
    2018/4/21 13:24:40
    明朗 0
    2018/4/20 17:57:37
    通过什么方式传到后台的dataURL?
    原理是什么
        Ouwen9560
        2018/7/14 14:35:06
        获取图片base64
    回复
取消回复