2011-05-20 128 views
0

我需要從本地硬盤讀取圖像文件並將其轉換爲base64格式。轉換後,我需要將base64字符串傳遞給web服務,並從web服務獲取結果。在JavaScript中將圖像(jpg)轉換爲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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/="; 
    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格式。你能幫我知道我哪裏出錯了嗎......

+0

這是相當多的代碼挖通過..至少你有沒有嘗試通過調試器? – 2011-05-20 02:06:56

回答

1

它是基於瀏覽器的嗎?如果是這樣,你會錯誤的。如果您需要從本地硬盤進行復制,則包含JavaScript的頁面將無法以字節級別訪問硬盤上的任何內容。充其量,您可以提供上傳鏈接,並使用類似'multipart/form-data'編碼類型的形式將表單發佈到服務器。

下面是catch ...如果您的Web服務無法理解表單發佈,您可以考慮創建一個代理來接受標準表單提交,然後通過您的(urk)SOAP請求傳遞它。請注意,這將是一個服務器API,而不是客戶端API。

流量(如果需要代理):

1)。用戶導航到網頁。 2)。用戶添加圖像。 3)。用戶點擊提交

4)。文件被傳送到代理

5)。代理啓動肥皂請求。 6)。代理將SOAP請求的結果返回給客戶端。