web-dev-qa-db-ja.com

SQLサーバーに画像を保存するためだけにJavaScriptを使用して画像をバイト配列に変換する方法は？

クライアント側のスクリプトを使用して画像をバイト配列に変換するのに苦労しています。 WebサービスがSQLサーバーにイメージを保存できるように、イメージをバイト配列に変換し、この配列をWebサービスに渡す必要があります。誰でも助けてください。

javascriptsql-serverimagebytearray
21
Raja Ramesh

私は1つの解決策を見つけました。 :)

html javascriptファイルで、最初に次のコードを使用してアップロードされた画像をbase64画像形式に変換します。

var p;
var canvas = document.createElement("canvas");
var img1=document.createElement("img"); 

function getBase64Image(){     
    p=document.getElementById("fileUpload").value;
    img1.setAttribute('src', p); 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img1, 0, 0); 
    var dataURL = canvas.toDataURL("image/png");
    alert("from getbase64 function"+dataURL );    
    return dataURL;
}

dataURLにアップロードされた画像のbase64コードを取得しました。

このBASE64コード（dataURL）をWebサービスに送信し、次のコードを使用してbase64文字列をバイト配列に変換し、SQLサーバーにも保存します

c＃コード-base64をバイトarryに変換し、SQLに保存するため

private void Form1_Load(object sender, EventArgs e) {
    int userid = 5;
    string base64="";// load base 64 code to this variable from js 
    Byte[] bitmapData = new Byte[base64.Length];
    bitmapData = Convert.FromBase64String(FixBase64ForImage(base64));
    string connstr = @"user id=sa; password=*****"; 
    database=ImageTest; 
    server="192.168.1.104";
    SqlConnection conn = new SqlConnection(connstr);
    conn.Open();
    string query;
    query = "insert into imagetable(userid,image) values(" + userid + "," + " @pic)";
    SqlParameter picparameter = new SqlParameter();
    picparameter.SqlDbType = SqlDbType.Image;
    picparameter.ParameterName = "pic";
    picparameter.Value = bitmapData;
    SqlCommand cmd = new SqlCommand(query, conn);
    cmd.Parameters.Add(picparameter);
    cmd.ExecuteNonQuery();
    cmd.Dispose();
    conn.Close();
    conn.Dispose();
}
public static string FixBase64ForImage(string image) {
    StringBuilder sbText = new StringBuilder(image, image.Length);
    sbText.Replace("\r\n", String.Empty);
    sbText.Replace(" ", String.Empty);
    return sbText.ToString();
}

理解してほしい:) ......

16
Raja Ramesh
File.prototype.convertToBase64 = function(callback){

    var FR= new FileReader();
    FR.onload = function(e) {
         callback(e.target.result)
    };       
    FR.readAsDataURL(this);
}

後でこれを使用してこの関数を呼び出します

var selectedFile = this.files[0];
selectedFile.convertToBase64(function(base64)

base64コードを取得します。

6
Aamer

この問題の可能な解決策：

  1. Faux-AJAX呼び出しを実行して、画像ファイルをアップロードします（ this jQueryプラグインは、これまでのところ驚くほどうまくいきました）。
  2. Request.Filesを使用して、投稿したページからファイルを取得します。
  3. 結果のHttpPostedFileのInputStreamプロパティを使用してWebメソッド呼び出しを実行し、Webメソッド呼び出しのbyte []パラメーターをフィードします。

同じ機能を実行するために特定のURLにページ全体を投稿することは明らかにできますが、私はAJAX/ASP.NETでのWebメソッドの組み合わせの大ファンです。 ASP.NETを使用してWebメソッドに投稿します。

JQueryを使用したくない場合は、JavaScriptのXMLHttpRequestオブジェクトを使用して、独自のAJAX関数を実装できます。 この記事 の実装方法の例がありますGET/POST URLへの呼び出しを実行します。

2
FarligOpptreden