关于jcrop图片裁剪插件更换不了图片的问题

 不能更换图片的代码  将下文中 ****************内的设置为全局变量即可

function fileSelectHandler() {
   
    // get selected file

	var oFile = document.getElementById('image_file').files[0];
    // hide all errors
    $('.error').hide();
   
    // check for image type (jpg and png are allowed)
    var rFilter = /^(image\/jpeg|image\/png)$/i;
    if (! rFilter.test(oFile.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
        return;
    }

    // check for file size
    if (oFile.size > 2500 * 1024) {
        $('.error').html('You have selected too big file, please select a one smaller image file').show();
        return;
    }

    // preview element
    var oImage = document.getElementById('preview');
    
    // prepare HTML5 FileReader
    var oReader = new FileReader();
        oReader.readAsDataURL(oFile); 
       // oImage.src = null;
        
        oReader.onload = function(e) {
        
        // e.target.result contains the DataURL which we can use as a source of the image
        oImage.src = e.target.result;
        	
       
        oImage.onload = function () { // onload event handler

           
            $('.step2').fadeIn(500);   //class为step2的显示出来
          
            var sResultFileSize = bytesToSize(oFile.size);
            $('#filesize').val(sResultFileSize); //图像大小
            $('#filetype').val(oFile.type);    //图像类型
            $('#filedim').val(oImage.naturalWidth + ' x ' + oImage.naturalHeight); //像素 x * y
            
            // 创建jcrop api和裁剪框的大小
        *************************************************************   
            var jcrop_api, boundx, boundy;//将这里设置为全局变量就可以了
      *******************************************************************
    // destroy Jcrop if it is existed
            if (typeof jcrop_api != 'undefined') 
                jcrop_api.destroy();
            
            // initialize Jcrop
            $('#preview').Jcrop({
                minSize: [32, 32], //最小边框大小
                aspectRatio : 1, // 裁剪边框的比例
                bgFade: true, // 背景特效
                bgOpacity: .3, // 背景透明度
                onChange: updateInfo, //边框改变事件
                onSelect: updateInfo, //边框选择事件
                onRelease: clearInfo  //边框释放事件
            }, function(){

                // use the Jcrop API to get the real image size
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];

                // Store the Jcrop API in the jcrop_api variable
                jcrop_api = this;
            });
        };
    };
    // read selected file as DataURL
     
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值