web-dev-qa-db-fra.com

Comment convertir l'image en tableau d'octets en utilisant javascript uniquement pour stocker l'image sur le serveur SQL?

J'ai du mal à convertir l'image en tableau d'octets à l'aide du script côté client. Je dois convertir l'image en tableau d'octets et transmettre ce tableau au service Web, afin que les services Web puissent enregistrer l'image sur le serveur SQL. N'importe qui s'il vous plaît, aidez-moi.

javascriptsql-serverimagebytearray
21
Raja Ramesh

j'ai trouvé une solution. :)

dans le fichier javascript html, convertissez d'abord l'image téléchargée au format d'image base64 en utilisant le code suivant.

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;
}

nous avons donc obtenu le code base64 de l'image téléchargée dans dataURL.

ENVOYEZ MAINTENANT CE CODE BASE64 (dataURL) au service Web et convertissez la chaîne base64 en tableau d'octets en utilisant le code suivant et enregistrez-le également sur le serveur SQL

code c # - pour convertir base64 en arte d'octets et pour stocker sur 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();
}

j'espère que tu comprends :) ......

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

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

et appeler plus tard cette fonction en utilisant ce

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

vous obtenez votre code base64.

6
Aamer

Une solution possible à ce problème:

  1. Effectuez un appel faux-AJAX pour télécharger le fichier image ( this le plugin jQuery a fait des merveilles pour moi jusqu'à présent).
  2. Récupérez le fichier à partir de la page sur laquelle vous le publiez via Request.Files.
  3. Exécutez l'appel de méthode Web en utilisant la propriété InputStream de HttpPostedFile résultante pour alimenter le paramètre byte [] de l'appel de méthode Web.

Vous pouvez évidemment faire une publication pleine page sur une URL spécifique pour effectuer la même fonctionnalité, mais je suis un grand fan des combinaisons de méthodes AJAX/web dans ASP.NET. Oh, cela suppose également vous utilisez ASP.NET pour publier dans la méthode Web.: P

Si vous ne voulez pas utiliser jQuery, vous pouvez implémenter votre propre fonction AJAX en utilisant l'objet XMLHttpRequest en JavaScript. Cet article a un bel exemple de mise en œuvre pour effectuer GET/POST appels vers une URL.

2
FarligOpptreden