choose-picture

上传图片、图片选择、裁剪

安装

npm install choose-picture --save

依赖

全局jquery

使用

• 姿势一:

var ChoosePicture = require('choose-picture');
//or import ChoosePicture from 'choose-picture';
    
new ChoosePicture({
    //图片最大宽度
    maxWidth:0,
    //图片最大高度
    maxHeight:0,
    //图片最小宽度
    minWidth:0,
    //图片最小高度
    minHeight:0,
    //裁剪的固定宽度
    width:0,
    //裁剪的固定高度
    height:0,
    //比例  16:9 | 4:3 | 1:1 | 2:3 等
    aspectRatio:'',
    size:5,
    //数量
    number:3,
    container: '#jAddImage',
    domain: '//e.dianping.com',
    //上传图片路径
    uploadUrl: '/image/upload',
    //上传图片参数配置
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    errorCallback:function(message){
        //无法打开此插件，如：无权限
    },
    getImageCallback:function(imgs){
        //图片全部裁剪成功,返回图片列表
        //[{name:'',url:''}]
    }
});

需要注意的是在配置webpack的时候检查配置文件中是否包含如下

    
    output:{
        libraryTarget: "umd"
    }

    loaders:[
        {
            test: /\.html$/,
            loader: "handlebars-loader"
        },
        {
            test: /\.css$/,
            loader: "style!css?-restructuring"
        },
        {
            test   : /\.(mp3|ogg|wav|swf)\??.*$/,
            loader : 'file-loader'
        }
    ],
    plugins: [
           
        new webpack.ProvidePlugin({
            $:      "jquery",
            jQuery: "jquery"
        })
    ]
    
不支持postcss编译

• 姿势二:

<!-- 在页面中直接引入 choose-picture 包,并创建个容器供初始化使用，swf文件需跟css在同级目录下 -->
<div id="choose-picture-container"></div>
<script src="https://{url}/app/choose-picture/choose-picture.min.css"></script>
<script src="https://{url}/app/choose-picture/choose-picture.min.js"></script>

$(function(){
    //new ChoosePicture({参数 })  或者
    $("#choose-picture-container").choosePicture({
    // or $("#choose-picture-container").addImage({
        //图片最大宽度
        maxWidth:0,
        //图片最大高度
        maxHeight:0,
        //图片最小宽度
        minWidth:0,
        //图片最小高度
        minHeight:0,
        //裁剪的固定宽度
        width:0,
        //裁剪的固定高度
        height:0,
        //比例  16:9 | 4:3 | 1:1 | 2:3 等
        aspectRatio:'',
        size:5,
        //数量
        number:3,
        errorCallback:function(message){
            //无法打开此插件，如：无权限
        },
        getImageCallback:function(imgs){
            //图片全部裁剪成功,返回图片列表
            //[{name:'',url:''}]
        }
    });
});

• 姿势三:

<!-- 在页面中直接引入 choose-picture 包 -->
<script src="https://www.{url}.com/app/choose-picture/choose-picture.min.css"></script>
<script src="https://www.{url}.com/app/choose-picture/choose-picture.min.js"></script>

$(function(){
    // 使用 choose-picture 包中暴露的全局构造函数初始化
    new ChoosePicture({
        //图片最大宽度
        maxWidth:0,
        //图片最大高度
        maxHeight:0,
        //图片最小宽度
        minWidth:0,
        //图片最小高度
        minHeight:0,
        //裁剪的固定宽度
        width:0,
        //裁剪的固定高度
        height:0,
        //比例  16:9 | 4:3 | 1:1 | 2:3 等
        aspectRatio:'',
        //图片大小
        size:5,
        //数量
        number:3,
        //是否有手动裁剪功能
        isCropper:true,
        errorCallback:function(message){
            //无法打开此插件，如：无权限
        },
        getImageCallback:function(imgs){
            //图片全部裁剪成功,返回图片列表
            //[{
                code:200,
                errMsg:null,
                height:1056,
                imgId:"1348",
                name:"091.jpg",
                originalImage:"https://test/dpmerchantimage/3cfa8aa2-4365-4c05-9eec-c4dca9fee93d.jpg",
                url:"https://test/dpmerchantimage/3cfa8aa2-4365-4c05-9eec-c4dca9fee93d.jpg@1408_1056m",
                width :1408
            }]
        }
    });
});

Command

#测试	
npm run test	
#打包	
npm run build	
#例子演示	
npm run demo