Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.11.2019, 14:04
Новичок на форуме
Отправить личное сообщение для Djus Посмотреть профиль Найти все сообщения от Djus
 
Регистрация: 21.11.2019
Сообщений: 5

Не отображается текст поверх картинки на канвас
Всем Здрасте! Проблема такая:нужно создать много картинок с подписыванием нужного текста на самой картинке в определённых местах и соответственно сохранением картинки по нажатию. Хочу сделать поле с вводом необходимой информации и вырисовывать её на картинку, но это позже. Сейчас хотябы чтоб просто текст писался поверх картинки. Вставляю в канвас картинку и следом пытаюсь вставить текст но он прорисовывается под картинкой. как заставить картинку рисоваться первой а следом подписывать нужный текст в нужном месте на картинке? Пробывал и просто прорисовывать и через 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>
Изображения:
Тип файла: jpg Безымянный.jpg (13.9 Кб, 6 просмотров)
Вложения:
Тип файла: txt print screen1.txt (1.3 Кб, 2 просмотров)

Последний раз редактировалось Djus, 21.11.2019 в 15:15. Причина: отредактировал код
Ответить с цитированием
  #2 (permalink)  
Старый 21.11.2019, 14:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 21.11.2019, 14:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 21.11.2019, 15:04
Новичок на форуме
Отправить личное сообщение для Djus Посмотреть профиль Найти все сообщения от Djus
 
Регистрация: 21.11.2019
Сообщений: 5

Как всЁ просто. Большое спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 22.11.2019, 16:42
Новичок на форуме
Отправить личное сообщение для Djus Посмотреть профиль Найти все сообщения от Djus
 
Регистрация: 21.11.2019
Сообщений: 5

А почему оно перестает сохранять в файл? Ошибку выдаёт
print screen1.html:59 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
В моём первом примере сохраняет, в этом не пойму в чем дело. Доступа к нему нету что ли?
Ответить с цитированием
  #6 (permalink)  
Старый 22.11.2019, 17:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Djus,
в вашем примере картинка и скрипт на одном сайте, иначе вопросы по безопасности возникают.
Ответить с цитированием
  #7 (permalink)  
Старый 22.11.2019, 17:41
Новичок на форуме
Отправить личное сообщение для Djus Посмотреть профиль Найти все сообщения от Djus
 
Регистрация: 21.11.2019
Сообщений: 5

Так я картинку загружаю с той же папки что и скрипт. Не пойму
Ответить с цитированием
  #8 (permalink)  
Старый 22.11.2019, 22:43
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Djus,
Протокол надо http:, а у тебя наверное file:, делай локальный сервер.
alert(location.protocol)
Ответить с цитированием
  #9 (permalink)  
Старый 22.11.2019, 23:26
Новичок на форуме
Отправить личное сообщение для Djus Посмотреть профиль Найти все сообщения от Djus
 
Регистрация: 21.11.2019
Сообщений: 5

Я конечно извиняюсь и спасибо что пытаешься мне помочь, но вот то что ты мне сказал я вообще не понял. Всё что я могу на стадии валенка. Написать простинький скриптик в блокноте и попытатся его запустить в браузере. Можешь дать ссылку где почитать об этом или скажи что вообще искать в интернетечтоб както понять в каком направлении двигаться, а то боюсь эта песня растянется на очень долго.
Ответить с цитированием
  #10 (permalink)  
Старый 23.11.2019, 02:19
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите поправить код, определения высоты блоков и их сравнения ozoro jQuery 20 09.11.2019 17:55
Помогите исправить JQuery плагин для разделения UL на равные списки ozoro jQuery 12 25.10.2019 17:37
Раскрывающийся список с объемными текстами morzer Общие вопросы Javascript 4 11.07.2016 14:54
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30