在JQuery中將圖像轉換爲base64string

我正在開發VS2015 cordova應用程序。我想要將圖像的基本64字符串發送到另一臺服務器。當我從圖庫中獲取圖像並將其轉換爲base64string時，出現問題。我獲得了base64string成功，但是當我拋棄它時，我總是會得到黑色的圖像。這裏是我的代碼：在JQuery中將圖像轉換爲base64string

function onPhotoURISuccess(imageURI) { 
    var largeImage = document.getElementById('smallImage'); 
    largeImage.style.display = 'block'; 
    largeImage.src = imageURI; 
    basestrg = encodeImageUri(imageURI); 

} 

function getPhoto(source) { 
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { 
     destinationType: Camera.DestinationType.NATIVE_URI, mediaType: Camera.MediaType.Photo, 
     sourceType: source 
    }); 
} 
function encodeImageUri(imageUri) { 
    var c = document.createElement('canvas'); 
    var ctx = c.getContext("2d"); 
    var img = new Image(); 
    img.onload = function() { 
     c.width = this.width; 
     c.height = this.height; 
     ctx.drawImage(img, 0, 0); 
    }; 
    img.src = imageUri; 
    var dataURL = c.toDataURL("image/jpeg"); 
    return dataURL; 
}

請指教。

來源

2016-02-13 prime

如果不確定添加它，檢查base64字符串是否以標識符開頭。 – seahorsepip

您使用異步回調在'onload'上繪製圖像。所以當你建立'dataUrl'時，圖像下面幾行還沒有繪製出來 – Paolo

@seahorsepip標識符是什麼？ – prime

當您嘗試獲取數據網址時，圖像未加載。

function encodeImageUri(imageUri, callback) { 
    var c = document.createElement('canvas'); 
    var ctx = c.getContext("2d"); 
    var img = new Image(); 
    img.onload = function() { 
     c.width = this.width; 
     c.height = this.height; 
     ctx.drawImage(img, 0, 0); 
     var dataURL = c.toDataURL("image/jpeg"); 
     callback(dataURL); 
    }; 
    img.src = imageUri; 
}

然後換另一函數傳遞一個回調

function onPhotoURISuccess(imageURI) { 
    var largeImage = document.getElementById('smallImage'); 
    largeImage.style.display = 'block'; 
    largeImage.src = imageURI; 
    encodeImageUri(imageURI, function(datauri){ 
     basestrg = datauri; 
     //Now send the string to the server here. 
    }); 

}

來源

2016-02-13 22:47:59 powerc9000

我試過這個，但是basestrg有未定義的值 – prime

@prime我的代碼有錯誤，我編輯了我的帖子。 – powerc9000

好吧，它解決了黑盒子圖像，但我從我的圖像得到大的base64string，無法傳遞給我的網絡服務任何想法，以減少這base64strg？ – prime

這是上下文旁邊，但可以幫助你。你可以直接從你的html5表格上傳圖片。

<form enctype="multipart/form-data" action="upload.php" method="post">  
    <input name="userImage" type="file" accept="image/*;capture=camera">  
    <button type="submit">Submit</button> 
</form>

獲取upload.php文件中的圖像數據並保存爲圖像。在PHP中使用$_FILES數組，而C＃使用HttpContext來保存圖像。
Ref：Using form input to access camera and immediately upload photos using web app

來源

2016-02-14 19:18:52 Avijit

在JQuery中將圖像轉換爲base64string

回答

相關問題