Проблема в преобразовании изображения (JPG) в формат Base64 в Javascript - PullRequest
Новая
       42

Проблема в преобразовании изображения (JPG) в формат Base64 в Javascript

0 голосов
/ 20 мая 2011

Мне нужно прочитать файл образа с локального жесткого диска и преобразовать его в формат base64. После преобразования мне нужно передать строку base64 веб-службе и получить результат от веб-службы.

У меня есть код для того же: 

<html>

<script>
// create the object

//test = new Base64();

x = new XMLHttpRequest();

// set the function that should be called when
// the ready state changes (the callback)
x.onreadystatechange = handleDoc;
// establish the method and URL
//x.open('GET', "Latest Eticket.jpg", true);
x.overrideMimeType("text/plain; charset=x-user-defined");
x.open('GET', 'file:///C:\\vishwa\\Node_JS\\Jquery_ajax\\JS_with_Ajax\\base64_encode\\Latest Eticket.jpg', true);
//x.open('GET', 'C:\vishwa\Node_JS\Jquery_ajax\JS_with_Ajax\base64_encode\Latest Eticket.jpg', true);
//x.open('GET', 'http://www.google.co.in/imgres?imgurl=http://1.bp.blogspot.com/_PveGYAt2T10/TDRH1kJsXAI/AAAAAAAAAgI/a45pNA5hxrA/s1600/hi-pig.jpg&imgrefurl=http://weiwei95.blogspot.com/2010_07_01_archive.html&usg=__k761BPCJk7FGxAgy8UHUiCCO1dA=&h=474&w=600&sz=51&hl=en&start=1&sig2=K2Z27chXr6EPO-lHJVY43g&zoom=1&tbnid=NSx-UedGEdm84M:&tbnh=107&tbnw=135&ei=uezUTbaDFMSBgAet_7iVDA&prev=/search%3Fq%3Dhi%26hl%3Den%26biw%3D1024%26bih%3D548%26gbv%3D2%26tbm%3Disch&itbs=1', true);
//x.open('GET', 'http://localhost:80//Latest Eticket.jpg', true);
// initiate the HTTP transaction
x.send(null);


//
function handleDoc() {
//window.alert("READY STATE IS " +
//x.readyState);
if(x.readyState == 1)
{
    window.alert("Handling x 1 State: The response is started");
}
if(x.readyState == 4)
{
    var encodeImagescanned_image = '';
    alert("Am i coming here 4-2"+x.responseText);
                    //var base64 = new Base64();
                    encodeImagescanned_image = encode(x.responseText);
                    alert("Am i coming here 4-3"+encodeImagescanned_image);
    window.alert("Handling x 4 State: The response is ended");

    alert("Constructing Soap body");
    var xmlp = "<soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:dsf=\"http://DSFService/\">" +
                    "<soapenv:Header/>" +
                    "<soapenv:Body>" +
                    "<dsf:FieldExtraction>" +
                    "<dsf:inImage>" +
                    this.encodeImagescanned_image +
                    "</dsf:inImage>" +
                    "</dsf:FieldExtraction>" +
                    "</soapenv:Body>" +
                    "</soapenv:Envelope>";
                    var xmlps = "<soapenv:Envelope xmlns:soapenv=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:dsf=\"http://DSFService/\">" +
                    "<soapenv:Header/>" +
                    "<soapenv:Body>" +
                    "<dsf:FieldExtraction>" +
                    "<dsf:inImage>" +
                    "</dsf:inImage>" +
                    "</dsf:FieldExtraction>" +
                    "</soapenv:Body>" +
                    "</soapenv:Envelope>";

                    var dsfUrl = "http://hpldsf-tst.asiapacific.cpqcorp.net:8090/DSFServiceSite/DSFService.svc/basic";
                    request = new XMLHttpRequest();
                        // We're going to be POSTing to this URL and want a synchronous response
                    request.open("POST", dsfUrl, true);
                    request.setRequestHeader("Content-Type", "text/xml;charset=UTF-8");
                    request.setRequestHeader("Content-length", xmlp.length);
                    request.setRequestHeader("Accept-Encoding", "gzip,deflate");
                    request.timeout = 300000;
                    // This header is a required part of the SOAP protocol
                    request.setRequestHeader("SOAPAction", '\"http://DSFService/DSFService/FieldExtraction\"');
                    // Now send an XML-formatted SOAP request to the server
                    request.send(xmlp);
                    request.onreadystatechange = handlesoap;


}
}

function handlesoap()
{
    alert("Inside handlesoap function");
    if(request.readyState == 4)
    {
        var xmls = request.responseText;
        var xmlDoc = (new DOMParser()).parseFromString(xmls, "text/xml");
        var doc = xmlDoc.documentElement;
        var nvalue = xmlDoc.getElementsByTagName('FieldExtractionResponse')[0];
        alert("nvalu ="+nvalue);
        if ((nvalue !== null) && (nvalue !== undefined)) 
        {

            ////var docidval = nodes.getAttribute("id");
            ///Mojo.Log.info("docidval:" + docidval);
            dsfxml = xmls; //nodes.nodeValue;
            var pattern = /\cM/;

                                // Break the string into pieces separated by the pattern above and
                                // and store the pieces in an array called nameList
                                var nameList = [];
                                nameList = dsfxml.split(pattern);
                                var clean = '';
                                for (i = 0; i < nameList.length; i++) {

                                    clean = clean + nameList[i].replace(pattern, "").trim();
                                }
        }
        else
        {
            alert("nvalue is eitheer null or undefined");
        }
    }
}



    function encode(input) {
    alert("I am in encode function");
    var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    while (i < input.length) {
        chr1 = input.charCodeAt(i++) & 0xff; //alert('chr1 : ' + chr1.toString(16));
        chr2 = input.charCodeAt(i++) & 0xff; //alert('chr2 : ' + chr2.toString(16));
        chr3 = input.charCodeAt(i++) & 0xff; //alert('chr3 : ' + chr3.toString(16));

        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;

        if (isNaN(chr2)) {
        enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
        enc4 = 64;
        }

        output = output +
        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
        _keyStr.charAt(enc3) + _keyStr.charAt(enc4);

    }

    return output;
}

</script>
</html>

Проблема заключается в неправильном преобразовании изображения в формат base64. Можете ли вы помочь мне знать, где я иду не так ...

1 Ответ

1 голос
/ 20 мая 2011

Это на основе браузера? Если это так, вы идете об этом неправильно. Если вам нужно скопировать с локального жесткого диска, страница, содержащая ваш javascript, не сможет получить доступ к чему-либо на вашем жестком диске на уровне байтов. В лучшем случае вы можете предоставить ссылку для загрузки и опубликовать форму на сервере, используя что-то вроде кодировки «multipart / form-data».

В этом и заключается подвох ... Если ваш веб-сервис не может понять сообщение формы как есть, вы можете создать прокси-сервер для приема стандартной отправки формы, а затем передать его через ваш (urk) запрос SOAP. Обратите внимание, что это будет серверный API, а не клиентский.

Поток (если нужен прокси):

1). Пользователь переходит на веб-страницу.

2). Пользователь добавляет изображение.

3). Пользователь нажимает Отправить

4). Файл передается на прокси

5). Прокси инициирует запрос мыла.

6). Прокси-сервер возвращает результаты SOAP-запроса клиенту.

...