Javascript-форум (https://javascript.ru/forum/)
-   Opera, Safari и др. (https://javascript.ru/forum/css-html-browser/)
-   -   Не отображается текст поверх картинки на канвас (https://javascript.ru/forum/css-html-browser/78908-ne-otobrazhaetsya-tekst-poverkh-kartinki-na-kanvas.html)

Djus 21.11.2019 14:04

Не отображается текст поверх картинки на канвас
 
Вложений: 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>

рони 21.11.2019 14:25

Djus,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони 21.11.2019 14:34

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>

Djus 21.11.2019 15:04

Как всЁ просто. Большое спасибо!

Djus 22.11.2019 16:42

А почему оно перестает сохранять в файл? Ошибку выдаёт
print screen1.html:59 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
В моём первом примере сохраняет, в этом не пойму в чем дело. Доступа к нему нету что ли?

рони 22.11.2019 17:18

Djus,
в вашем примере картинка и скрипт на одном сайте, иначе вопросы по безопасности возникают.

Djus 22.11.2019 17:41

Так я картинку загружаю с той же папки что и скрипт. Не пойму

Rise 22.11.2019 22:43

Djus,
Протокол надо http:, а у тебя наверное file:, делай локальный сервер.
alert(location.protocol)

Djus 22.11.2019 23:26

Я конечно извиняюсь и спасибо что пытаешься мне помочь, но вот то что ты мне сказал я вообще не понял. Всё что я могу на стадии валенка. Написать простинький скриптик в блокноте и попытатся его запустить в браузере. Можешь дать ссылку где почитать об этом или скажи что вообще искать в интернетечтоб както понять в каком направлении двигаться, а то боюсь эта песня растянется на очень долго.

Rise 23.11.2019 02:19

Djus,
free edition / mongoose-free-6.9.exe / системный трей / Set shared directory / Go to my address


Часовой пояс GMT +3, время: 02:40.