Не отображается текст поверх картинки на канвас
Вложений: 2
Всем Здрасте! Проблема такая:нужно создать много картинок с подписыванием нужного текста на самой картинке в определённых местах и соответственно сохранением картинки по нажатию. Хочу сделать поле с вводом необходимой информации и вырисовывать её на картинку, но это позже. Сейчас хотябы чтоб просто текст писался поверх картинки. Вставляю в канвас картинку и следом пытаюсь вставить текст но он прорисовывается под картинкой. как заставить картинку рисоваться первой а следом подписывать нужный текст в нужном месте на картинке? Пробывал и просто прорисовывать и через onload, чего то не получается. Не судите строго, в программирование валенок, чисто хочу облегчить немного работу.
Вод код:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div id = "btn" width = "200" style = "background-color:khaki">
<p>TTT</p>
</div>
<div id = "cnvs" width = "900">
<canvas id="canvas" width="800" height="734" style = "border:1px solid red;"></canvas>
</div>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
window.onload=function(){
var img=new Image();
img.src = 'img/fric.jpg';
img.onload = function(){
ctx.drawImage(img, 50, 50);
console.log("onload");
}
}
ctx.fillStyle = "#006600";
ctx.fillRect(0, 0, 400, 400);
ctx.fillStyle = "#00F";
ctx.strokeStyle = "#F00";
ctx.font = "italic 30pt Arial";
ctx.fillText("TTTTTTtext", 20, 20);
canvas.onclick = function() {
var dataURL = canvas.toDataURL("image/jpeg");
var link = document.createElement("a");
document.body.appendChild(link);
link.href = dataURL;
link.download = "my-image-name.jpg";
link.click();
document.body.removeChild(link);
};
</script>
</body>
</html>
|
Djus,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Djus,
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div id = "btn" width = "200" style = "background-color:khaki">
<p>TTT</p>
</div>
<div id = "cnvs" width = "900">
<canvas id="canvas" width="800" height="734" style = "border:1px solid red;"></canvas>
</div>
</div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
window.onload=function(){
var img=new Image();
img.src = 'http://w7t.ru/zooms/7da1/7/6168262b44.jpg';
img.onload = function(){
ctx.drawImage(img, 50, 50);
console.log("onload");
ctx.fillStyle = "#006600";
ctx.fillRect(0, 0, 400, 400);
ctx.fillStyle = "#00F";
ctx.strokeStyle = "#F00";
ctx.font = "italic 30pt Arial";
ctx.fillText("TTTTTTtext", 20, 20);
}
}
canvas.onclick = function() {
var dataURL = canvas.toDataURL("image/jpeg");
var link = document.createElement("a");
document.body.appendChild(link);
link.href = dataURL;
link.download = "my-image-name.jpg";
link.click();
document.body.removeChild(link);
};
</script>
</body>
</html>
|
Как всЁ просто. Большое спасибо!
|
А почему оно перестает сохранять в файл? Ошибку выдаёт
print screen1.html:59 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. В моём первом примере сохраняет, в этом не пойму в чем дело. Доступа к нему нету что ли? |
Djus,
в вашем примере картинка и скрипт на одном сайте, иначе вопросы по безопасности возникают. |
Так я картинку загружаю с той же папки что и скрипт. Не пойму
|
Я конечно извиняюсь и спасибо что пытаешься мне помочь, но вот то что ты мне сказал я вообще не понял. Всё что я могу на стадии валенка. Написать простинький скриптик в блокноте и попытатся его запустить в браузере. Можешь дать ссылку где почитать об этом или скажи что вообще искать в интернетечтоб както понять в каком направлении двигаться, а то боюсь эта песня растянется на очень долго.
|
| Часовой пояс GMT +3, время: 06:36. |