0

我正在使用 PhoneGap 为 iPhone 开发一个应用程序，并且我正在使用 JavaScript 进行编码。我所做的是，我正在从网上下载图像并将其编码为 Base64，以使用以下方法将其存储在我的数据库中：

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

存储的图像格式为：

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

现在，我需要在用户离线时从数据库中获取图像并将其显示在 HTML5 画布项上。我有以下代码：

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

但是即使我检查并确定 src 是我从数据库中获得的确切 base64 编码，我也会得到一个空画布。我应该先做其他事情，比如解码然后显示图像吗？如果是，我该如何实施？

4

3 回答 3

1

这可以简单地通过

<img id="company_logo"/>
<script type="text/javascript" > 
document.getElementById("company_logo").src="data:image/png;base64,"+base64String;
</script>
于 2012-08-06T12:16:39.693 回答
0

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

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

于 2020-02-19T02:45:10.717 回答
-1

使用您的代码作为基础，我一起破解了一个 q'n'd 示例。它有效，但前提是它最初位于 Web 服务器上（没有“file:///...”）并且在同一个域中，否则在调用. 请参阅此 SO 帖子。context.toDataURL()

因此，也许您应该首先尝试将脚本包装在 try...catch 中，看看是否会引发错误。

编辑：这是被黑的版本（把它放在服务器上并在它旁边放一个“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>
于 2011-07-27T18:33:22.587 回答