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相关的问题（请参阅污染的画布可能不会导出 ）。