Question

我正在一个允许用户参与民意调查并获得积分的网站上工作。我希望他们能够在任何网站上显示他们的用户名+分数+其他东西，例如他们自己的博客，论坛签名等作为图像。有点像stackoverflow风格！

当然，由于他们的分数和其他数据会不断变化，我希望动态生成图像（我使用的是php）。我已经得到了一个使用canvas的地方，其中canvas-png图像在我的网站上显示正常，但如果我尝试在img标签中使用页面url作为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>

Answer 1

如果将其加载到图像标记中，浏览器将不会解释/执行JS。它会尝试计算该页面源的原始字节是什么样的二进制图像格式（gif / jpg / png / etc ...），并且失败。 Img标签不是将远程页面/代码加载到页面中的方法。

要实现这一点，您需要让用户插入一段JS，从您的网站动态加载脚本。

e.g。而不是

<img src="http://yoursite.com/canvas.php" />

你有

<script src="http://yoursite.com/canvas.php" /></script>

Answer 2

使用PHP创建这些图像。

http://php.net/manual/en/function.imagejpeg.php

如果您坚持使用Canvas，请将此页面放在IFRAME中。

如何在其他网站上显示动态生成的画布图像

2 个答案: