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

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

 22869  172  查看评论 (117)
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图片裁剪插件Cropit

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

html5前端图片压缩

html5前端图片压缩
  图像
 47459  141

橡皮擦--图片擦除效果

电脑端、移动端(Android、ios等)都可适应!
  图像
 20546  123

jQuery放大镜插件jqzoom.js

jQuery放大镜插件jqzoom.js
  图像
 26861  80

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

    领先00后 0
    2018/1/24 9:46:06

    为什么点击的时候反应这么慢呢,要停顿几秒才能出来

    回复
    如初 0
    2018/1/22 9:23:32
    权哥是神 0
    2018/1/16 16:09:05
    九天子 0
    2018/1/12 15:54:12
    怎么获取保存的地址 回复
    Symbol 0
    2018/1/10 14:39:32

    可以裁剪,可以上传,保存后台怎么做呢

    回复
    Xx 0
    2018/1/8 16:11:36
    P_code 0
    2018/1/8 9:39:44
    上传小图片,并不能拖动图片。 回复
    P_code 0
    2018/1/6 17:02:57

    怎么取消保存呢?

        P_code0
        2018/1/6 17:18:36

        晓得了

    回复
    他叫_阿维 0
    2018/1/5 14:35:31

    可以

        Dyhtg0
        2018/1/15 11:45:59

        可以

    回复
    勇往直前 0
    2018/1/4 16:44:54
    怎么获取截取图片的路径 回复
取消回复