0

Web アプリケーションで Ajax アップロード コントロールを使用して、アップロード後に JCrop を使用して画像をトリミングしています。Chrome や Firefox では問題なく動作しますが、IE ではうまく動作しません。JCrop v0.9.12 (ビルド: 20130202) と IE v10.0.9.9200.16635 を使用しています。問題は、JCrop の選択が IE で機能しないことです。ありがとう!

これが私のスクリプトです。

<script type="text/javascript">

    jQuery(document).ready
        (function ($) {
            // To hold the API and image size.
        var jcrop_api, boundx, boundy;
            $('#<%=imgCrop.ClientID%>').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: 11 / 15
                }, function ()
                {
                    jcrop_api = this;
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                }
            );

        function updatePreview(c) {
            if (parseInt(c.w) > 0) {
                var rx = 100 / c.w;
                var ry = 100 / c.h;
                $('#<%=Img_preview.ClientID%>').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'
                });
            }
        };           
    });

    // will store the selected part the images coordinates
    function storeCoords(c) {
        jQuery('#<%=W.ClientID%>').val(c.w);
        jQuery('#<%=H.ClientID%>').val(c.h);
        jQuery('#<%=X.ClientID%>').val(c.x);
        jQuery('#<%=Y.ClientID%>').val(c.y);
    };

</script>
4

1 に答える 1