0

我正在使用一个 jquery 插件来预览裁剪图像。问题是当我上传图像时，它会显示全长为 1280 * 1024 的图像。我希望无论图像大小如何，它都以 300 * 300 的固定长度显示。

没有给出大小的 Aspx 代码可以正常工作：

 <img id="Img_UploadLogo" runat="server" src=""/>

jquery是： 

<script type="text/javascript">
    function preview(img, selection) {
        if (!selection.width || !selection.height)           
            return;

        var scaleX = 175 / (selection.width || 1); // width height of preview image div
        var scaleY = 85 / (selection.height || 1);
        var Width = $('#<%=Img_UploadLogo.ClientID %>').width(); // width height of preview image div
        var Height = $('#<%=Img_UploadLogo.ClientID %>').height();

        $('#preview img').css({

            width: Math.round(scaleX *Width ) + 'px', // width of orgnal image div
            height: Math.round(scaleY *Height ) + 'px',
            marginLeft: -Math.round(scaleX * selection.x1),
            marginTop: -Math.round(scaleY * selection.y1)            

        });



        $('#<%=x1.ClientID %>').val(selection.x1);
        $('#<%=y1.ClientID %>').val(selection.y1);
        $('#<%=x2.ClientID %>').val(selection.x2);
        $('#<%=y2.ClientID %>').val(selection.y2);
        $('#<%=w.ClientID %>').val(selection.width);
        $('#<%=h.ClientID %>').val(selection.height);

    }

    $(function () {
        $('#<%=Img_UploadLogo.ClientID %>').imgAreaSelect({aspectRatio: '1:1', x1: 120, y1: 90, x2: 280, y2: 210, show: false, handles: true,
            fadeSpeed: 200, onSelectChange: preview,
        });
    });

</script>

上面的代码对我来说很好。它显示正确的预览和正确的裁剪图像。但是当我为下面的图像提供固定尺寸时，它会显示正确的预览，但裁剪图像不正确。

当我给它提供固定大小时，没有正确裁剪图像： 给定大小的 Aspx 代码不适用于裁剪图像：

 <img id="Img_UploadLogo" runat="server" src="" style="width: 300px; height: 300px;"/>

请向我推荐解决方案，以便完美裁剪图像。

4

0 回答 0