Jquery图像裁剪在IE浏览器中不起作用 [英] Jquery Image cropping is not working in IE Browser

问题描述

嗨朋友们，



我实现了使用jquery图像裁剪的图像裁剪功能。

jquery裁剪图像功能正常工作Chrome，Mozilla ，苹果浏览器。 IE9浏览器也可以工作但只有localhost。发布并上传到生产服务器后。现在不工作图像裁剪只有IE浏览器并没有在IE浏览器控制台中显示任何错误。



如何解决我的错误。请帮帮我..？



我的Jquery脚本如

Hi Friends,

I am implements Image cropping functionality using jquery image crop.
jquery crop image functionality working fine Chrome, Mozilla,safari. IE9 browser also working but only localhost. after publish and upload into production server. now not working image cropping only IE browser and doesn''t show any error in IE browser Console.

how to solve my error.? please help me..?

my Jquery script like

<script type="text/javascript">
jQuery(function ($) {
    // To hold the API and image size.
    var jcrop_api, boundx, boundy;
    $('.cropView').Jcrop(
        {
            // img_crop is the ID of image control
            onChange: updatePreview, // will display the selected img on change.
            onSelect: updatePreview, // will display the selected img Img_preview
            onSelect: storeCoords, // will tell the coordinates
            aspectRatio: 1,
            bgOpacity: .4,
            setSelect: [400, 400, 200, 200],
            aspectRatio: 1,
            // maxSize: [300, 300],
            minSize: [200, 200],
            display: 'block'
        }, 
        function () {
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            jcrop_api = this;
        });

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = 100 / c.w;
                var ry = 100 / c.h;
                $('.cropped').css({  //Img_preview is the ID of image control
                    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',
                    display: 'none'
                });
        }
    };
});
// will store the selected part the images coordinates
//             
function storeCoords(c) {
    jQuery('#ContentPlaceHolder1_X').val(c.x);  // X of the hidden field
    jQuery('#ContentPlaceHolder1_Y').val(c.y);  // Y of the hidden field
    jQuery('#ContentPlaceHolder1_W').val(c.w);  // W of the hidden field
    jQuery('#ContentPlaceHolder1_H').val(c.h);  // H of the hidden field
};
</script>

<link href="../css/jquery.Jcrop.css" rel="stylesheet" type="text/css" /> 
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="../js/jquery.Jcrop_.min_.js" type="text/javascript"></script>

感谢和问候

thanks and regards

推荐答案

）{
// 保存API和图像大小。
var jcrop_api，boundx，boundy;

) { // To hold the API and image size. var jcrop_api, boundx, boundy;

（' 。cropView'）。Jcrop（
{
< span class =code-comment> // img_crop是图像控件的ID
onChange：updatePreview， // 将在更改时显示所选的img。
onSelect：updatePreview， // 将显示所选的img Img_preview
onSelect：storeCoords， // 将告诉坐标
aspectRatio： 1 ，
bgOpacity：。 4 ，
setSelect：[ 400 ， 400 ， 200 ， 200 ]，
aspectRatio： 1 ，
// maxSize：[300 ，300]，
minSize：[ 200 ， 200 ]，
显示：' block'
}，
function （）{
var bounds = this 。的getBounds（）;
boundx = bounds [ 0 ];
boundy = bounds [ 1 ];
jcrop_api = 此;
}）;

function updatePreview（c）{
if （ parseInt （cw）> 0 ）{
var rx = 100 / cw;
var ry = 100 / ch;

('.cropView').Jcrop( { // img_crop is the ID of image control onChange: updatePreview, // will display the selected img on change. onSelect: updatePreview, // will display the selected img Img_preview onSelect: storeCoords, // will tell the coordinates aspectRatio: 1, bgOpacity: .4, setSelect: [400, 400, 200, 200], aspectRatio: 1, // maxSize: [300, 300], minSize: [200, 200], display: 'block' }, function () { var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; jcrop_api = this; }); function updatePreview(c) { if (parseInt(c.w) > 0) { var rx = 100 / c.w; var ry = 100 / c.h;

（' 。cropped'）。css（{ // Img_preview是图像控件的ID
width： Math .round（rx * boundx）+ ' px'，
height： Math .round（ry * boundy）+ ' px'，
marginLeft：' - ' + 数学 .round（rx * cx）+ ' px'，
marginTop： - ' + 数学 .round（ry * cy）+ ' px'，
display：' none'
}）;
}
};
}）;
// 将所选部分存储在图像坐标
//
function storeCoords（c）{
jQuery（' ＃ContentPlaceHolder1_X'）。val（cx）; // 隐藏字段的X
jQuery（' ＃ContentPlaceHolder1_Y'）。val（cy）; // 隐藏字段的Y
jQuery（' ＃ContentPlaceHolder1_W'）。val（cw）; // 隐藏字段的W
jQuery（' ＃ContentPlaceHolder1_H'）。val（ch）; // 隐藏字段的H
};
< / script >

< 链接 href = ../ css / jquery.Jcrop.css rel = 样式表 类型 = text / css < span class =code-attribute> / >
< script src = ../ js / jquery-1.7.1.min.js type = text / javascript > < / script >
< script src = ../ js / jquery.Jcrop_.min_.js type = text / javascript > < / script >

('.cropped').css({ //Img_preview is the ID of image control 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', display: 'none' }); } }; }); // will store the selected part the images coordinates // function storeCoords(c) { jQuery('#ContentPlaceHolder1_X').val(c.x); // X of the hidden field jQuery('#ContentPlaceHolder1_Y').val(c.y); // Y of the hidden field jQuery('#ContentPlaceHolder1_W').val(c.w); // W of the hidden field jQuery('#ContentPlaceHolder1_H').val(c.h); // H of the hidden field }; </script> <link href="../css/jquery.Jcrop.css" rel="stylesheet" type="text/css" /> <script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../js/jquery.Jcrop_.min_.js" type="text/javascript"></script>

谢谢和问候

thanks and regards

这篇关于Jquery图像裁剪在IE浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！