Как преобразовать изображение в байтовый массив, используя JavaScript только для хранения изображения на сервере SQL?

Question

Я борюсь за преобразование изображения в байтовый массив, используя скрипт на стороне клиента. Я должен преобразовать изображение в байтовый массив и передать этот массив веб-сервису, чтобы веб-сервисы могли сохранить изображение на сервере sql. Любой, пожалуйста, помогите мне.

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

, поэтому мы получили код base64 загруженного изображения в dataURL.

СЕЙЧАС ОТПРАВЬТЕ ЭТОТ КОД BASE64 (dataURL) в веб-сервис и преобразуйте строку base64 в байтовый массив, используя следующий код, и сохраните на сервере sql тоже

c # code - для преобразования base64 в байтовый массив и для хранения на 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();
}

надеюсь, вы понимаете :) ......

Answer 2

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.

Answer 3

Возможное решение этой проблемы:

1. Выполните вызов faux-AJAX для загрузки файла изображения ( этот плагин jQuery до сих пор творил для меня чудеса).
2. Получить файл со страницы, на которой вы публикуете его, через Request.Files.
3. Выполните вызов веб-метода, используя полученное свойство InputStream объекта HttpPostedFile, чтобы передать параметр byte [] вызова веб-метода.

Очевидно, что вы можете делать полностраничную публикацию по определенному URL, чтобы выполнить те же функции, но я большой поклонник комбинаций AJAX / веб-методов в ASP.NET.О, это также предполагает, что вы используете ASP.NET для публикации в веб-метод.: P

Если вы не хотите использовать jQuery, вы можете реализовать свою собственную функцию AJAX, используя объект XMLHttpRequest в JavaScript. Эта статья содержит хороший пример того, как реализовать ее для выполнения вызовов GET / POST для URL.