Question

我为我的网站创建了一个图像上传器，并使用带有裁剪按钮的彩色框弹出图像，以便该人可以裁剪图像，一旦按下裁剪按钮就可以保存。但是我现在有几个问题。

在IE中，当弹出框出现时，您首先必须单击裁剪按钮几次，具体取决于我使用IE 10的IE，但我已经测试了IE 8，您只需要一次，它允许您裁剪。一旦发生这种情况，它会将裁剪后的图像保存到文件夹中，但不会在其颜色框部分显示裁剪后的图像。
在firefox中，裁剪光标会首次显示弹出框，但不会将裁剪后的图像保存到文件夹中。

这是我的代码如下：

这是使用颜色框的时候，并在图片加载后弹出。

 <script type="text/javascript">

        $(function () {
            $('#file_upload').uploadify({
                'fileSizeLimit': '1.5MB',
                'swf': '/JavaScript/uploadify/uploadify.swf',
                'uploader': '/JavaScript/uploadify/ImgHandler.ashx',
                'onUploadComplete': function (file) {
                    $.colorbox({ iframe:true, href: "/Mapping/BrochureImgUploader.aspx?file=" + file.name, width: "95%", height: "95%" });
                }
            });
        });


    </script>

然后在一个新的新页面上，这是jcrop发挥作用的地方：

%@ Page Language="VB" AutoEventWireup="false" Theme="" CodeFile="BrochureImgUploader.aspx.vb" Inherits="Mapping_BrochureImgUploader" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Upload Photo</title>
 <link rel="stylesheet" type="text/css" href="../JavaScript/jcrop/jquery.Jcrop.css"/>
</head>

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
            <Scripts>
                <asp:ScriptReference Path="~/JavaScript/jquery/jquery-1.9.1.min.js" />
                <asp:ScriptReference  Path="~/JavaScript/jcrop/jquery.Jcrop.min.js"/>
    </Scripts>
        </asp:ScriptManager>
        <asp:HiddenField runat="server" ID="hfmeh" />
           <img src='' style="margin-left:auto; margin-right:auto;" id="upcrop" />
            <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" value="Crop Image" onclick="crop()"/>
 </form>
</body>

    <script type="text/javascript">

        var is_msie = /msie/.test(navigator.userAgent.toLowerCase());
        var jcrop_obj;

        $(document).ready(function () {
            $("#upcrop").prop("src", $("#<%=hfmeh.ClientID%>").val())
  $("#upcrop").Jcrop({
                    aspectRatio: 1,
                    onSelect: updateCoords
                });
        });

        function updateCoords(c) {
            $('#x').val(c.x);
            $('#y').val(c.y);
            $('#w').val(c.w);
            $('#h').val(c.h);
        };

        function crop() {
            if (parseInt($('#w').val()) > 0) {
                PageMethods.CropImg($("#<%=hfmeh.ClientID%>").val(), $('#x').val(), $('#y').val(), $('#w').val(), $('#h').val(), onCrop)
            }
            else {
                alert('Please select a crop region then press submit.');
            }
        };

        function onCrop(result) {
            $("#upcrop").prop("src", result);
        }

    </script>
</html>

在裁剪位的服务器端部分，代码在这里：

Imports System.Web.Services
Imports System.IO
Imports SD = System.Drawing
Imports System.Drawing.Imaging
Imports System.Drawing.Drawing2D

Partial Class Mapping_BrochureImgUploader
    Inherits System.Web.UI.Page
 Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
  hfmeh.Value = "/Images/Brochure/uploads/" & Request.QueryString("file")
End Sub


    <WebMethod()> _
    Public Shared Function CropImg(img As String, x As Double, y As Double, w As Double, h As Double) As String
        Dim CropImage As Byte() = Crop(HttpContext.Current.Server.MapPath(img), CInt(x), CInt(y), CInt(w), CInt(h))
        Dim SaveTo As String

        Using ms As MemoryStream = New MemoryStream(CropImage, 0, CropImage.Length)
            ms.Write(CropImage, 0, CropImage.Length)
            Using CroppedImage As SD.Image = SD.Image.FromStream(ms, True)
                Dim pos As UInt16 = img.LastIndexOf(".")
                SaveTo = Left(img, pos) & "_crop" & Right(img, img.Length - pos)
                CroppedImage.Save(HttpContext.Current.Server.MapPath(SaveTo), CroppedImage.RawFormat)
            End Using
        End Using
        Return SaveTo
    End Function

    Public Shared Function Crop(img As String, x As UInt16, y As UInt16, w As UInt16, h As UInt16) As Byte()
        Try
            Using OriginalImage As SD.Image = SD.Image.FromFile(img)
                Using bmp As SD.Bitmap = New SD.Bitmap(w, h)
                    bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution)
                    Using Graphic As SD.Graphics = SD.Graphics.FromImage(bmp)
                        Graphic.SmoothingMode = SmoothingMode.AntiAlias
                        Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic
                        Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality
                        Graphic.DrawImage(OriginalImage, New SD.Rectangle(0, 0, w, h), x, y, w, h, SD.GraphicsUnit.Pixel)
                        Dim MS As MemoryStream = New MemoryStream()
                        bmp.Save(MS, OriginalImage.RawFormat)
                        Return MS.GetBuffer()
                    End Using
                End Using
            End Using
        Catch Ex As Exception
            Throw (Ex)
        End Try
    End Function

我对php非常好，并设法找到vb.net tut供我使用。在服务器部分，它将裁剪后的图像保存到末尾带有单词裁剪的文件夹中，以便不会覆盖原始图像，但正如我所说，FF根本不保存裁剪的图像，IE似乎无法裁剪从一开始就没有先按下裁剪按钮。

奇怪的是，对于裁剪和保存裁剪后的图像，Chrome似乎工作得很好。

是不是因为两个人不想一起工作或者我在其他地方做错了什么？

任何帮助都会很棒。

更新：我现在通过更改type = submit to按钮让FF工作，但是它仍然有问题，所以我编辑代码以反映FF修复但是

彩盒与jcrop发生冲突

0 个答案: