如何在其他网站上显示动态生成的画布图像
我正在开发一个允许用户参与民意调查并赚取一些积分的网站。我希望他们能够在任何网站上显示他们的用户名+分数+一些其他内容，例如他们自己的博客、论坛签名等作为图像。有点像 stackoverflow 的风格！
当然，由于他们的分数和其他数据会不断变化，我希望动态生成图像（我使用的是 php）。我已经达到了使用 canvas 的程度，其中 canvas-png 图像在我的网站上显示良好，但如果我尝试使用页面 url 作为 img 标记中的 src，则图像不会显示。
下面是生成画布的页面：
<html>
<head>
<script type="text/javascript" src="/jscripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var canvas = document.getElementById("c"),
context = canvas.getContext("2d");
context.fillStyle = "rgb(155, 155, 155)";
context.fillRect(0, 0, 250, 100);
context.stroke();
var imgObj = new Image();
imgObj.onload = function ()
{
// Draw the image on the canvas
context.drawImage(imgObj, 4, 8, 32, 32);
}
imgObj.src="<?=$iUser->avatar?>";
var username = "Username from php";
context.fillStyle = "rgb(0, 0, 0)";
context.font = "18px sans-serif";
context.fillText(username, 42, 20);
var score = "CGH Score : " + "146";
context.fillStyle = "rgb(0, 0, 0)";
context.font = "14px sans-serif";
context.fillText(score, 42, 40);
var img_data=canvas.toDataURL('image/png');
var img_element="<img src=\"" + img_data + "\" />";
$("#c").remove();
$("head").html("<meta http-equiv=\"content-type\" content=\"image/png\"/>");
$("body").html(img_element);
//document.body="<img src=\"" + img_data + "\" />";
//document.write(img_data);
//var output=img_data.replace(/^data:image\/(png|jpg);base64,/, "");
//$.post("/show_img/",{image_data:output});
//window.location = canvas.toDataURL('image/png');
});
</script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
Am working on a site which allows users to participate in polls and earn some points. I'd like them to be able to display their username + score + some other stuff on any website, for example their own blog, forum signatures, etc. as an image. Kindof like stackoverflow flair !
Ofcourse, since their scores and other data will keep changing, I'd like the image to be generated dynamically (I am using php). I have got to a point using canvas where the canvas-png image displays fine on my site, but if I try to use the page url as a src in an img tag, the image doesnot show up.
Below is the page which generates the canvas :
<html>
<head>
<script type="text/javascript" src="/jscripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var canvas = document.getElementById("c"),
context = canvas.getContext("2d");
context.fillStyle = "rgb(155, 155, 155)";
context.fillRect(0, 0, 250, 100);
context.stroke();
var imgObj = new Image();
imgObj.onload = function ()
{
// Draw the image on the canvas
context.drawImage(imgObj, 4, 8, 32, 32);
}
imgObj.src="<?=$iUser->avatar?>";
var username = "Username from php";
context.fillStyle = "rgb(0, 0, 0)";
context.font = "18px sans-serif";
context.fillText(username, 42, 20);
var score = "CGH Score : " + "146";
context.fillStyle = "rgb(0, 0, 0)";
context.font = "14px sans-serif";
context.fillText(score, 42, 40);
var img_data=canvas.toDataURL('image/png');
var img_element="<img src=\"" + img_data + "\" />";
$("#c").remove();
$("head").html("<meta http-equiv=\"content-type\" content=\"image/png\"/>");
$("body").html(img_element);
//document.body="<img src=\"" + img_data + "\" />";
//document.write(img_data);
//var output=img_data.replace(/^data:image\/(png|jpg);base64,/, "");
//$.post("/show_img/",{image_data:output});
//window.location = canvas.toDataURL('image/png');
});
</script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果将其加载到图像标签中，浏览器将不会解释/执行 JS。它会尝试找出该页面源的原始字节是什么类型的二进制图像格式（gif/jpg/png/等...），但会失败。 Img 标签不是将远程页面/代码加载到页面中的方法。
为此，您需要让用户插入一段 JS 片段，以从您的网站动态加载脚本。
例如，而不是
你
If you load that into an image tag, the browser will NOT interpret/execute the JS. it'll try to figure what kind of binary image format (gif/jpg/png/etc...) the raw bytes of that page's source are, and fail. Img tags are not a way to load a remote page/code into a page.
For this to work, you'd need to have the users insert a snippet of JS which loads the script dynamically from your site.
e.g. instead of
you'd have
使用 PHP 创建这些图像。
http://php.net/manual/en/function.imagejpeg.php
或者，如果您坚持使用 Canvas，则将此页面放入 IFRAME 中。
Create these images with PHP instead.
http://php.net/manual/en/function.imagejpeg.php
Or put this page in an IFRAME if you insist to use Canvas.