4

ここでちょっと立ち往生しています。canvas.toDataURL を使用して base64 でエンコードされた文字列を生成し、サーバー上の従来の ASP ページに渡すことができることを知っています。しかし、答えが見つからないように見える問題は、このデータを処理してサーバーのどこかに保存できるようにする方法です。

したがって、HTML ページのこのコード スニペットを使用して、キャンバス データを取得します (これは StackOverflow の別の投稿から取得しました)。

var dataURL = renderedCanvas.toDataURL("image/png");    
dataURL = dataURL.replace('data:image/png;base64,', '');

var areturn = $.ajax({
  url: "http://127.0.0.1/mySite/saveImage.asp",
  type: "POST",
  data: '{ "imageData" : "' + dataURL + '" }',
  dataType: "json",
  beforeSend: function(x) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
  }
}).done(function(result) {
    console.log("Success Done!\n" + result);
}).always(function(data) {
    console.log("Always:\n" + data.responseText);
});

しかし、サーバー側にいるときにデータをどうするかはわかりません... Request.Form 要素を取得できますが、それを base64 でデコードする良い方法を見つけることができないようです。バイナリファイルとして出力することさえできます...古典的なASPはbase64デコードを行うのが得意ではないと聞いたことがあると思います.別のテストで、base64デコードを行う関数を見つけましたが、わかりませんでした.実際に機能した場合でも、実行に長い時間がかかりました。私はまた、このリンクを見つけました: ASPクラシックのbase64イメージデコーダーですが、これはMicrosoftが使用を推奨していない32ビットコンポーネントだと思います...html5キャンバスの保存に関する提案については、ここのコミュニティを探していると思いますイメージをサーバーに。

4

3 に答える 3

5

bin.base64インスタンスを介して作成されたデータ型を指定するXML要素を使用して、 DomDocumentBase64データをエンコード/デコードできます。
次に、オブジェクトを使用して、取得したバイナリをディスクに保存できStreamます。
これらのライブラリは両方とも64ビットでサポートされています。送信したコンテンツがサーバー側のRequestコレクション（jsonを使用しない従来のpostメソッドなど）で利用できると仮定すると、次のコードで問題が解決するか、最悪の場合、洞察が得られると確信しています。

saveImage.asp

Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
    With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
        .dataType = "bin.base64"
        .text = sData
        Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
        Base64Data2Stream.Position = 0
    End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))

'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("imgFileFromCanvas.png"), 2 'adSaveCreateOverWrite
于 2012-10-15T23:31:46.557 に答える
0

これに対する解決策を共有したいと思いました。

$(document).ready(function(){
    getBase64FromImageUrl('test5px.png');

            function getBase64FromImageUrl(URL) {
                var img = new Image();
                img.src = URL;
                img.onload = function () {          
                var canvas = document.createElement("canvas");
                canvas.width =this.width;
                canvas.height =this.height;         
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0);          
                var dataURL = canvas.toDataURL("image/png");            
                //alert(  dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
                saveImageData(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
                }
            }

            function saveImageData (image_data) {
                $.post("saveImage.asp",
                {imageData:image_data,submit:true})
                .done(function(data, textStatus, jqXHR) 
                    {
                    alert(data);             
                    }).fail(function(jqXHR, textStatus, errorThrown) 
                {
                    alert(textStatus);
                });
 });

htmlで

<img id="test" src="http://someDomain.com/img/test5px.png">

私は実際にウェブカメラのcanvas.toDataURLから画像データをスナップショットとして取得していましたが、ページ上のimgタグだけでも機能します

saveImage.asp で

<%@ Language=VBScript %>
<% Option Explicit %>
<%

response.write(request("imageData"))

Function Base64Data2Stream(sData)
    Set Base64Data2Stream = Server.CreateObject("Adodb.Stream")
        Base64Data2Stream.Type = 1 'adTypeBinary
        Base64Data2Stream.Open
    With Server.CreateObject("MSXML2.DomDocument.6.0").createElement("b64")
        .dataType = "bin.base64"
        .text = sData
        Base64Data2Stream.Write .nodeTypedValue 'write bytes of decoded base64 to stream
        Base64Data2Stream.Position = 0
    End With
End Function

Dim CanvasStream
Set CanvasStream = Base64Data2Stream(Request.Form("imageData"))

'Write binary to Response Stream
'Response.BinaryWrite CanvasStream.Read

'Write binary to File
CanvasStream.SaveToFile Server.Mappath("userImages/" & request("imageName")), 2                    'adSaveCreateOverWrite
%>
于 2014-10-27T02:02:57.910 に答える