Phonegap | 將imageuri轉換為base64 | 使用jQuery將其上傳到服務器后得到黑色圖像

Question

我想要imageuri的有效base64字符串。 我為此使用了下面的代碼，但是將其上傳到服務器后會出現黑色圖像。

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

我還嘗試了其他選項，但沒有獲得可靠的base64 imagedata的可靠解決方案。 我不想使用文件傳輸方法上傳圖像。 我想將imageuri轉換為簡單的base64字符串。 請為我建議同樣的具體答案。

謝謝

Answer 1

請注意，我尚未在PhoneGap中對此進行測試。

您可能會被異步加載的圖像所吸引； 您需要先將其編碼為字符串，然后才能真正對其進行完整加載和處理。

有多種處理方式； 一種可能性是轉向使用success()方法來處理返回值，一旦加載並繪制了圖像，就會調用該返回值：

function encodeImageUri(imageUri, success)
{
     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);
       success(c.toDataURL("image/jpeg"));       
     };

     img.src=imageUri;
}

然后，您將需要使用將處理最終結果的函數來調用encodeImageUri ，例如：

encodeImageUri(" < url > ", function (data) {
    console.log(data);
});

根據PhoneGap使用的安全模型，您可能必須注意與CORS相關的問題（請參閱污染的畫布可能不會導出 ）。