获取 img 源（从 dataURL 画布）到另一个页面答案

【问题标题】：get img source (from dataURL canvas) to another page获取 img 源（从 dataURL 画布）到另一个页面
【发布时间】：2011-11-02 14:46:52
【问题描述】：

抱歉，标题可能不太清楚我要完成的工作。

让我解释一下。我有一个 html 页面，上面有一个按钮，只要单击该按钮，就会运行一个 php 页面（在后台）。该页面（从数据库）生成一个画布，该画布被转换为编码图像（base64），并将其添加到该 php 页面的 img 源中（这有效）。现在我想要的是获取该 img 源并将其显示在 html 页面（按钮所在的位置）上。

如果您需要任何示例代码，请告诉我。

我希望有人可以帮助我解决这个问题。谢谢

【问题讨论】：

您是否使用 jQuery 将数据发布到 PHP 页面？你能发布 Javascript / jQuery 代码吗？

标签： javascript ajax html canvas data-url

【解决方案1】：

如果你使用 jQuery，你可以使用 .load 函数：

$('#result').load('ajax/test.php', function() {
  alert('Load was performed.');
});

其中#result 是button 的ID 或它附近的div .... ajax/test.php 将是您的脚本，alert 在function 中是成功回调（可以如果不需要，请删除）

【讨论】：

这是来自 php 页面var dataURL = canvas.toDataURL(); document.getElementById("canvasImg").src = dataURL;};</script></head><body><canvas id="myCanvas" width="73" height="103" style="display:none;"></canvas><? $tag = '<img id="canvasImg">'; echo $tag;?></body></html> 的部分代码我试图寻找一种使用 jQuery 的好方法，但没有找到好的示例。谢谢

【解决方案2】：

根据您发布的小代码，我认为它看起来像这样，虽然不确定？

......
var dataURL = canvas.toDataURL(); 
document.getElementById("canvasImg").src = dataURL;
document.getElementById("ImgCode").value = dataURL;
};
</script>
</head>
<body>
<canvas id="myCanvas" width="73" height="103" style="display:none;"></canvas>

<? $tag = '<img id="canvasImg">'; 
<? $tag2 = '<input id="ImgCode" type="text">';

echo $tag;?>
echo $tag2;?>

</body>
</html>

您可能需要设置输入标签的样式和位置，或者替换为 div，或者您真正喜欢的任何内容，只需使用 innerHTML 或类似的东西而不是 value。

【讨论】：

我一直在研究代码并从上面的代码中删除了标记部分。我也一直在使用索引页面中的代码，但我得到的只是没有其值的输入标签（在 php 页面的源代码中，我什至看不到它的值，只有 img 文件的源代码） source 是我需要插入到索引页面上的图像中的内容。下面是索引页的代码：<script type="text/javascript">function getImage(){$('#result').load('tt7.php #ImgCode');};</script><input type="button" value="Create Thumbnail" onclick="getImage();"><img id="result">
我在想，也许它与 php 页面没有完全准备好（加载画布并创建图像）有关，也许这就是为什么它是空的？