我无法通过 iPhone 上的 phonegap 显示编码图像 (Base64)

Question

I am developing an application for iPhone using the PhoneGap and I am coding in JavaScript.我正在使用 PhoneGap 为 iPhone 开发应用程序，并且正在使用 JavaScript 进行编码。 What I do is that I am downloading an image from the web and encode it into Base64 to store it in my database using the:我所做的是从网络下载图像并将其编码为 Base64 以使用以下命令将其存储在我的数据库中：

dataURL = canvas.toDataURL("image/png");

The stored image is of the form:存储的图像格式为：

data:image/jpeg;base64,ENCODING...

Now, I need when the user is offline, to get the image from the database and display it on the HTML5 canvas item.现在，我需要在用户离线时从数据库中获取图像并将其显示在 HTML5 画布项目上。 I have the following code for that:我有以下代码：

var canvas = document.getElementById("draw_area");
var context = canvas.getContext('2d');
var myImage = new Image();
myImage.src = dataURL;

myImage.onload = function (){
    context.drawImage (myImage, 0, 0);        
};

BUT I get an empty canvas even though I check and am sure that the src is the exact base64 encoding I get from the database.但是，即使我检查并确定 src 是我从数据库中获得的确切 base64 编码，我也得到了一个空画布。 Should I do something else first, like decoding and then display the image?我应该先做其他事情，比如解码然后显示图像吗？ If yes, how do I implement that?如果是，我该如何实施？

Answer 1

This can be done simply by这可以简单地通过

<img id="company_logo"/>
<script type="text/javascript" > 
document.getElementById("company_logo").src="data:image/png;base64,"+base64String;
</script>

Answer 2

根据我的个人经验，它与 CSP 相关，请尝试将此行添加到您的 html 元或将其附加到您现有的 CSP。

 <meta http-equiv="Content-Security-Policy" content="img-src 'self' data:">

Answer 3

Using your code as base I hacked a q'n'd sample together.使用您的代码作为基础，我一起破解了一个 q'n'd 样本。 It worked but only, if it's on an web server initially (no "file:///...") and in the same domain , otherwise a security error gets thrown when calling context.toDataURL() .它有效，但前提是它最初位于 Web 服务器上（没有“file:///...”）并且在同一个域中，否则在调用context.toDataURL()时会引发安全错误。
See this SO post .请参阅此 SO 帖子。

So maybe you should first try to wrap your script in a try...catch and see if an error gets thrown.因此，也许您应该首先尝试将脚本包装在 try...catch 中，看看是否会抛出错误。

Edit: here's the hacked version (place it on a server and put a "green.png" next to it):编辑：这是被黑的版本（将它放在服务器上并在它旁边放一个“green.png”）：

<html>
<body>
<img id="image" src="green.png"/>
<canvas id="draw1" style="width:100px;height:100px;border:1px solid red"></canvas>
<canvas id="draw2" style="width:100px;height:100px;border:1px solid green"></canvas>
<script type="text/javascript">
var image = document.getElementById("image");
var canvas1 = document.getElementById("draw1");

canvas1.getContext("2d").drawImage(image,0,0);

var canvas2 = document.getElementById("draw2");

var dataUrl = canvas1.toDataURL();

var myImage = new Image();

myImage.src = dataUrl;

canvas2.getContext('2d').drawImage(myImage, 0, 0);            


</script>
</body>
</html>

我无法通过 iPhone 上的 phonegap 显示编码图像 (Base64)

问题描述

3 个解决方案

解决方案1
1 2012-08-06 12:16:39

解决方案2
0 2020-02-19 02:45:10

解决方案3
-1 已采纳 2011-07-27 18:33:22

我无法通过 iPhone 上的 phonegap 显示编码图像 (Base64)

问题描述

3 个解决方案

解决方案1 1 2012-08-06 12:16:39

解决方案2 0 2020-02-19 02:45:10

解决方案3 -1 已采纳 2011-07-27 18:33:22

解决方案1
1 2012-08-06 12:16:39

解决方案2
0 2020-02-19 02:45:10

解决方案3
-1 已采纳 2011-07-27 18:33:22