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。我不想使用文件传输方法上传图像。我想在简单的base64字符串中转换imageuri。请建议我具体的答案。

由于

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相关的问题（请参阅Tainted canvases may not be exported）。

Phonegap |将imageuri转换为base64 |使用jquery将其上传到服务器后获取黑色图像

1 个答案: