Я работаю над сайтом, который позволяет пользователям участвовать в опросах и зарабатывать очки. Мне бы хотелось, чтобы они могли отображать свое имя пользователя + баллы + некоторые другие материалы на любом веб-сайте, например, собственный блог, подписи на форуме и т. Д. В виде изображения. Kindof как талант стека переполнения!
Конечно, поскольку их оценки и другие данные будут меняться, я бы хотел, чтобы изображение генерировалось динамически (я использую php). Я попал в точку, используя canvas, где изображение canvas-png отлично отображается на моем сайте, но если я попытаюсь использовать URL страницы в качестве src в теге img, изображение не появится.
Ниже приведена страница, которая генерирует холст:
<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>