0

asp.net Webページで画像編集作業が1つあります。実際には、画像の領域を選択し、選択した部分を非表示にするために画像の選択した部分に黒い長方形のボックスのようなグラフィカルオブジェクトを描画する必要があります最後に編集作業を元の画像に保存する必要があります。

私は自分のWebページに画像をロードし、ユーザーがjavascript関数を使用して画像の上に長方形のボックスを描画できるようにしました。

その画像をサーバーに保存するためのコードも作成しました...しかし、機能しません....

コントロールがこの線を越えたことはないと思います (この線に何らかのエラーがある可能性があります)

var image = document.getElementById("Image2").toDataURL("image/png");

目的を確認するために、上記の行の後に 1 つの警告ステートメントを配置しました...しかし、それは印刷されません...そして何も起こりませんでしたか?...

画像上に長方形ボックスを描画するための Java Script コード:

<head>
 <style type="text/css">
        #rubberBand 
        {
            position: absolute;
            visibility: hidden;
            width:0px;
            height:0px;
            border: 2px;border-color:Red;
            background-color:black;
         }
    </style>
</head>

<body>
<div id="rubberBand"></div>
<asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/>

<script type="text/javascript">

        var IMG;

        function startRubber(evt) {
            if (document.all) {

                var r = document.all.rubberBand;
                r.style.width = 0;
                r.style.height = 0;
                r.style.pixelLeft = event.x;
                r.style.pixelTop = event.y;
                r.style.visibility = 'visible';
                IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
            }
            else if (document.getElementById) {
                // firefox
                evt.preventDefault();
                var r = document.getElementById('rubberBand');
                r.style.width = 0;
                r.style.height = 0;
                r.style.left = evt.clientX + 'px';
                r.style.top = evt.clientY + 'px';
                r.style.visibility = 'visible';
                r.onmouseup = stopRubber;
            }
            IMG.onmousemove = moveRubber;
        }
        function moveRubber(evt) {
            if (document.all) { // IE
                var r = document.all.rubberBand;
                r.style.width = event.x - r.style.pixelLeft;
                r.style.height = event.y - r.style.pixelTop;
            }
            else if (document.getElementById) { // firefox
                var r = document.getElementById('rubberBand');
                r.style.width = evt.clientX - parseInt(r.style.left);
                r.style.height = evt.clientY - parseInt(r.style.top);
            }
            return false; // otherwise IE won't fire mouseup
        }
        function stopRubber(evt) {
            IMG.onmousemove = null;
        }

        function cancelDragDrop() {
            window.event.returnValue = false;
        }
        IMG = document.getElementById('Image2');
        IMG.onmousedown = startRubber;
        IMG.onmouseup = stopRubber;

   </script>
</body>

これは、画像を保存するための私の Java スクリプト コードです。

<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
   <script type="text/javascript">
        // Send the canvas image to the server.
        $(function () {
            $("#btnSend").click(function () {
                var image = document.getElementById("Image2").toDataURL("image/png");
                image = image.replace('data:image/png;base64,', '');

                $.ajax({
                    type: 'POST',
                    url: 'Default.aspx/UploadImage',
                    data: '{ "imageData" : "' + image + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (msg) {
                        alert('Image sent!');
                    }
                });
            });
        });
    </script>
</head>
<body>
<asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/>
<input id="btnSend" type="button" value="Send To Server" />
</body>

画像を保存するためのバックエンド コード:

[WebMethod()]
        public static void UploadImage(string imageData)
        {

            FileStream fs = new FileStream("D:\\vs-2010projects\\js_save\\js_save\\myimages\\image.png", FileMode.Create);
            BinaryWriter bw = new BinaryWriter(fs);

            byte[] data = Convert.FromBase64String(imageData);

            bw.Write(data);
            bw.Close();
        }
4

1 に答える 1

3

あなたは既製の解決策を探していたようですが、あなたが見つけられなかったのは奇妙ではありません。

自分で解決できるか、他の人が解決した小さなステップに問題を分割する必要があります。要するに：

  1. 画像を Web ページにレンダリングする
  2. JavaScript を使用して画像の周りにある種のボックスをドラッグすることにより、ユーザーが画像を「編集」できるようにします。
  3. ボックスの座標をサイトにアップロードし、画像にボックスを描画して新しい画像として保存します

または、JavaScript キャンバスを使用してステップ 3 のクライアント側を実行することもできます。この場合、ブラウザは編集された画像をサーバーに送り返します。

ここで、上記のどの点に問題があるかを指摘する必要があります。

于 2013-05-27T07:08:17.593 に答える