0
ユーザーが投票に参加していくつかのポイントを獲得できるサイトで働いています。私は、彼らのユーザ名+スコア+任意のウェブサイト上のいくつかの他のもの、例えば自分のブログ、フォーラムの署名などを画像として表示できるようにしたいと思います。 Kindofのようなstackoverflowの才能！他のウェブサイトに動的に生成されたキャンバスイメージを表示する方法
もちろん、スコアやその他のデータが変化し続けるので、私は動的に画像を生成したい（私はPHPを使用しています）。 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>
ありがとうございました。代わりにgdを使用しました。 – SIndhu