2
回答
Jcrop火狐下第一次载入图片出现小黑点
开发十年,就只剩下这套Java开发体系了   

Jcrop裁剪图片,在火狐下载入图片,第一次是小黑点:

第二次载入同一张图片,就可以正常载入了:

在谷歌和IE下没有这个问题。

我观察了页面元素,错误的时候,页面的div和显示图片的img的宽是0,高是17px。

下面是我的JS代码:

/**
 *
 * Created by wangxy on 2017/3/4.
 */
function readURLMy(input) {
    //判断你图片的大小和类型
    var file = input.value;
    console.log(file);
    if (!/.(jpg|jpeg|png|JPG|JPEG|PNG)$/.test(file)) {
        $("#error_photo_type").html('您选择的图片不符合规则,请重新选择');
        $("#error_photo_type").show();
        //$('form').hide();
        $('#uploadPhoto').hide();
        $('#canclePhoto').hide();
        $('.cur_img_right').hide();
        $('.js_cur_img').show();
        jcrop_api.destroy();
        $mainImg.removeAttr("style");//移除掉所有的样式,让jcrop重新生成
        $mainImg.removeAttr('src');
        return false;
    } else {
        // if (((input.files[0].size).toFixed(2)) >= (3 * 1024 * 1024)) {
        //     $("#error_photo_type").html('您选择的图片不符合规则,请重新选择');
        //     $("#error_photo_type").show();
        //     $('form').hide();
        //     $('.cur_img_right').hide();
        //     $('.js_cur_img').show();
        //     return false;
        // }
    }

    var ua = navigator.userAgent;
    if (ua.indexOf("MSIE 8.0") > 0 || ua.indexOf("MSIE 9.0") > 0) {

        $("#error_photo_type").hide();
        $('form').show();
        $('.cur_img_right').show();
        $('.js_cur_img').hide();
        $('#uploadPhoto').show();
        $('#canclePhoto').show();

        var fileInputElm = jQuery('#fcupload');
        var reallocalpath = jQuery('#fcupload')[0].value;
        console.log(reallocalpath);
        fileInputElm.get(0).select();
        var pic = $mainImg.get(0);
        pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";
        pic.src = reallocalpath;
        $mainImg.css("width","400px");
        $mainImg.css("height","400px");
        $mainImg.show();

        $pimg.get(0).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";
        $pimg.get(0).src = reallocalpath;

        $pimg2.get(0).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";
        $pimg2.get(0).src = reallocalpath;

        $pimg3.get(0).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + reallocalpath + "\")";
        $pimg3.get(0).src = reallocalpath;
        $preview.css("top","-3");
        $preview.css("left","413");
        $preview2.css("top","-65");
        // $preview2.css("left","574px");
        $preview3.css("top","-191px");
        // $preview3.css("left","584px");

        //显示三个预览图
        //$preview.show();
        //$preview2.show();
        //$preview3.show();
        if (jcrop_api != undefined) {
            jcrop_api.destroy();
        }
        jcrop_api = $.Jcrop('#target', {
            setSelect: [20, 20, 200, 200],
            onChange: updatePreview,
            onSelect: updatePreview,
            boxWidth: 322,
            aspectRatio: xsize / ysize
        });
        var bounds = jcrop_api.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        $preview.appendTo(jcrop_api.ui.holder);
        $preview2.appendTo(jcrop_api.ui.holder);
        $preview3.appendTo(jcrop_api.ui.holder);
        jcrop_api.release();
        jcrop_api.disable();
    }else{
        if (((input.files[0].size).toFixed(2)) >= (3 * 1024 * 1024)) {
            $("#error_photo_type").html('您选择的图片不符合规则,请重新选择');
            $("#error_photo_type").show();
            //$('form').hide();
            $('#uploadPhoto').hide();
            $('#canclePhoto').hide();
            $('.cur_img_right').hide();
            $('.js_cur_img').show();
            jcrop_api.destroy();
            $mainImg.removeAttr("style");//移除掉所有的样式,让jcrop重新生成
            $mainImg.removeAttr('src');
            return false;
        }
        $("#error_photo_type").hide();
        $('form').show();
        $('.cur_img_right').show();
        $('.js_cur_img').hide();
        $('#uploadPhoto').show();
        $('#canclePhoto').show();
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(input.files[0]);
            reader.onload = function (e) {
                $mainImg.removeAttr("style");//移除掉所有的样式,让jcrop重新生成
                $mainImg.removeAttr('src');
                $mainImg.attr('src', e.target.result);
                $pimg.removeAttr('src');
                $pimg.attr('src', e.target.result);
                $pimg2.removeAttr('src');
                $pimg2.attr('src', e.target.result);
                $pimg3.removeAttr('src');
                $pimg3.attr('src', e.target.result);
                //显示三个预览图
                $preview.show();
                $preview2.show();
                $preview3.show();

                jcrop_api = $.Jcrop('#target', {
                    setSelect: [20, 20, 200, 200],
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    boxWidth: 322,
                    aspectRatio: xsize / ysize
                });
                var bounds = jcrop_api.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                $preview.appendTo(jcrop_api.ui.holder);
                $preview2.appendTo(jcrop_api.ui.holder);
                $preview3.appendTo(jcrop_api.ui.holder);
            };
            if (jcrop_api != undefined) {
                jcrop_api.destroy();
            }
        }

    }
    function updatePreview(c) {
        $("#x").val(c.x);
        $("#y").val(c.y);
        $("#w").val(c.w);
        $("#h").val(c.h);
        if (parseInt(c.w) > 0) {
            var rx = xsize / c.w;
            var ry = ysize / c.h;

            $pimg.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });

            var rx = xsize2 / c.w;
            var ry = ysize2 / c.h;

            $pimg2.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
            var rx = xsize3 / c.w;
            var ry = ysize3 / c.h;

            $pimg3.css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
            });
        }
    };

}

下面是HTML代码,用的VM模板

#set($layout = "/templates/layout/layout.vm")
#set($CSS = ["/css/base.css",
             "/css/personalCenter.css",
             "/css/changeHeadImg.css",
             "/css/changePassword.css",
             "/css/modifyMessage.css",
             "/css/uploadUserPhoto2.css",
             "/css/jquery.Jcrop.css"])
#set($JS = ["/js/jquery.Jcrop.js","/js/out2.js","/js/uploadUserPhoto2.js","/js/alertDiv.js"])
#set($page_title = "个人中心-修改头像")
##<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css"></link>
##<link rel="stylesheet" href="../css/changeHeadImg.css" type="text/css"></link>
<link rel="stylesheet" href="../css/uploadUserPhoto.css" type="text/css"></link>
##<script type="text/javascript" src="../js/libJS/jquery.min.js"></script>
##<script type="text/javascript" src="../js/libJS/jquery.Jcrop.js"></script>
<script type="text/javascript" src="../js/jquery-3.2.0.js"></script>
<script type="text/javascript" src="../js/out.js"></script>
<script type="text/javascript" src="../js/uploadUserPhoto.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
    <div class="content clearfix">
    #parse("/templates/inc/menu.vm")
    <div class="right_content clearfix">
        <div class="account_m">
            <ul  class="account_tab">
                <li><a href="personalCenter">个人资料</a></li>
                <li class="cur"><a href="personalPhoto">修改头像</a></li>
                <li><a href="personalPassword">修改密码</a></li>
            </ul>
            <div class="account_con clearfix">
                <div class="content_img tab">
                    <div class="fl">
                        <p>使用新头像</p>
                        <p>你可以上传JPG、PNG、JPGE文件,文件需小于3MB</p>
                        <p style="display:none;color:#999" id="AlertForIE89">请保证您的本地目录路径上载至服务器功能开启!</p>
                        <div class="upLoad upload_img_left">
                            <label for="fcupload">
                                <span>上传头像</span>
                            </label>
                            <form id="myForm" action="/personal/upload" class="upload_form" method="POST" enctype="multipart/form-data" name="form1">
                                <input class="photo-file" type="file" name="file" style="opacity:0;filter:alpha(opacity=0);" accept="image/jpg, image/jpeg, image/png" id="fcupload" onchange="readURLMy(this);" />
##                              <input class="photo-file" type="file" name="file" accept="image/jpg, image/jpeg, image/png" id="fcupload" onchange="readURLMy(this);" />
                                <input  id="position"  type="hidden" name="position">
                                <img id="target" alt="" style="display:none;width: 400px;height: 400px" name="" src="" >
                                <input type="hidden" id="x" name="x" />
                                <input type="hidden" id="y" name="y" />
                                <input type="hidden" id="w" name="w" />
                                <input type="hidden" id="h" name="h" />
                                <input type="button" style="display: none" value="保存头像" id="uploadPhoto" class="submit_css">
                                <input type="button" style="display: none" id="canclePhoto" value="取消" class="button_css">
                            </form>
                        ##<input id="fileSelect" type="file"  name="file" accept="image/jpg, image/jpeg, image/png" style="opacity:0;filter:alpha(opacity=0);" />
                            <p class="error_msg" id="error_photo_type" style="display:none">图片格式错误,请重新选择</p>
                        </div>

                    </div>
                    <div class="fr js_cur_img">
                        <div class="cur_img_text">
                            <p>当前头像</p>
                        </div>
                        <div class="cur_img">
                            <img src="$!avatarUrl" alt="当前头像">
                        </div>
                    </div>
                <div class="cur_img_right clearfix">
                                    <p>系统会根据 您上传的图片生成3种尺寸的头像,如图所示。</p>
                                    <div id="preview-pane" style="display: none">
                                        <div class="preview-container">
                                            <img src="" class="jcrop-preview" alt="" />
                                        </div>
                                    </div>
                                    <div id="preview-pane2" style="display: none">
                                        <div class="preview-container">
                                            <img src="" class="jcrop-preview" alt="" />
                                        </div>
                                    </div>
                                    <div id="preview-pane3" style="display: none">
                                        <div class="preview-container">
                                            <img src="" class="jcrop-preview" alt="" />
                                        </div>
                                    </div>
                                    <div class="three_img clearfix" style="position: relative">
                                        <div class="size_left clearfix">
                                            <div class="size_120 clearfix"> <span><img src="http://static.qcdqcdn.com/passport/0/img/change_img.png" alt=""></span></div>
                                            <p>160*160px</p>
                                        </div>
                                        <div class="size_right clearfix">
                                            <div class="size_div1">
                                                <div class="size_30"><span><img src="http://static.qcdqcdn.com/passport/0/img/change_img.png" alt=""></span></div>
                                                <p>70*70px</p>
                                            </div>
                                            <div class="size_div2">
                                                <div class="size_60"><span><img src="http://static.qcdqcdn.com/passport/0/img/change_img.png" alt=""></span></div>
                                                <p>100*100px</p>
                                            </div>
                                        </div>
                                    </div>

                                </div>
##                    <span class="upload_msg" id="upload_result"><span id="revert_time">(3S)</span>头像上传<span id="result_upload">成功</span></span>
                </div>

            </div>
        </div>
    </div>
</div>
<script>

    $(document).ready(function () {
//        var submit = jQuery('#submit');
//        var fileInputElm = jQuery('#fcupload');
//        submit.click(function (e) {
//            fileInputElm.get(0).click();
//        });
        $('form').show();
        $('#canclePhoto').on('click',function () {
            window.location.reload();
        });
        $('.account_tab li').on('click',function () {
            $(this).addClass('cur').siblings().removeClass('cur');
            $('.account_con .tab').eq($(this).index()).show().siblings().hide()
        })

        var nextInputCode=(function () {
            $('.next_step input').on('click',function () {
                $('#js_content_password .tab_p').show();
                $('#js_content_password .phone_identify').hide();
            })
        })();

        var modifySuccess=function () {
            $('#js_save_settings').on('click',function () {
                $('#js_modify_password_success').show();
            });
            $('#js_select_button button').on('click',function () {
                $('#js_modify_password_success').hide();
            })
        };
        modifySuccess();
    })
</script>
<script>

        //Jcrop全局API
        var jcrop_api = null,
            boundx,
            boundy,


        $mainImg = $('#target'),
            // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        $preview2 = $('#preview-pane2'),
        $pcnt2 = $('#preview-pane2 .preview-container'),
        $pimg2 = $('#preview-pane2 .preview-container img'),

        $preview3 = $('#preview-pane3'),
        $pcnt3 = $('#preview-pane3 .preview-container'),
        $pimg3 = $('#preview-pane3 .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height(),

        xsize2 = $pcnt2.width(),
        ysize2 = $pcnt2.height(),

        xsize3 = $pcnt3.width(),
        ysize3 = $pcnt3.height();
</script>

奇怪的是谷歌IE都没有问题,只是火狐这样,很蛋疼!!!!!!

感谢大家!!!

 

举报
iftom
发帖于2年前 2回/122阅
共有2个答案 最后回答: 2年前

问题解决了,是Jcrop初始化语句方式的问题,还有,显示预览图片的代码要放到回调里。具体如下:

 

更改Jcrop的初始化语句的写法,并且把缩略图的显示放在回调方法里:

    

$('#target').Jcrop({
    setSelect: [20, 20, 200, 200],
    onChange: updatePreview,
    onSelect: updatePreview,
    boxWidth: 322,
    aspectRatio: xsize / ysize
},function(){
    jcrop_api = this;
    var bounds = jcrop_api.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];
    $preview.appendTo(jcrop_api.ui.holder);
    $preview2.appendTo(jcrop_api.ui.holder);
    $preview3.appendTo(jcrop_api.ui.holder);
    //显示三个预览图
    $preview.show();
    $preview2.show();
    $preview3.show();
});
顶部