Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2015, 08:53
MRJ MRJ вне форума
Интересующийся
Отправить личное сообщение для MRJ Посмотреть профиль Найти все сообщения от MRJ
 
Регистрация: 03.03.2014
Сообщений: 25

canvas и текст в изображение по клику
Люди, помогите вот с этой фишкой http://stackoverflow.com/a/18549573

На jsfiddle все работает, но когда скачиваю, подключаю jquery - не фурычит что-то. Кто-нибудь скиньте готовый html-код если тот у вас тоже не работает. Спасибо.

Что я делаю не так?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Prototype</title>
    
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
 
<style type="text/css">
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:300px;
    height:300px;
}
</style>
  
<script type="text/javascript">
var stage = new Kinetic.Stage({
    container: 'container',
    width: 300,
    height: 300
});
var layer = new Kinetic.Layer();
stage.add(layer);


var image = new Image();
image.onload = function () {

    var image1 = new Kinetic.Image({
        x: 0,
        y: 0,
        width: 300,
        height: 300,
        image: image,
    });
    layer.add(image1);

    layer.draw();

}
image.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";


$("#addbutton").click(function () {

    // simple label
    var label = new Kinetic.Label({
        x: 20,
        y: 20,
        draggable: true
    });

    label.add(new Kinetic.Tag({
        fill: 'green'
    }));

    label.add(new Kinetic.Text({
        text: $("#newtext").val(),
        fontFamily: 'Verdana',
        fontSize: 18,
        padding: 10,
        fill: 'white'
    }));

    layer.add(label);

    layer.draw();


});
</script>
</head>
<body>
<input id="newtext" type="text" value="Hello!">
<button id="addbutton">Any this text</button>
<h2>The added text is draggable</h2>
<div id="container"></div>
</body></html>

Последний раз редактировалось MRJ, 31.08.2015 в 09:13.
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2015, 09:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

MRJ,
вы что нибудь про готовность страницы слышали или читали ? типа $.ready или window.onload или строка 81
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2015, 09:38
MRJ MRJ вне форума
Интересующийся
Отправить личное сообщение для MRJ Посмотреть профиль Найти все сообщения от MRJ
 
Регистрация: 03.03.2014
Сообщений: 25

я-то тут не причем) код брал оттуда) 81 съехала, каюсь) а что в нем не так? просто я нуб в js))
Ответить с цитированием
  #4 (permalink)  
Старый 31.08.2015, 09:43
MRJ MRJ вне форума
Интересующийся
Отправить личное сообщение для MRJ Посмотреть профиль Найти все сообщения от MRJ
 
Регистрация: 03.03.2014
Сообщений: 25

Так ?

$(window).load(function(){


о, фурычит теперь )
Ответить с цитированием
  #5 (permalink)  
Старый 31.08.2015, 09:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

MRJ,
Сообщение от рони
строка 81
скрипт можно перенести, поставить перед body, страница к этому моменту уже загрузится (DOM, html)
Ответить с цитированием
  #6 (permalink)  
Старый 31.08.2015, 17:24
MRJ MRJ вне форума
Интересующийся
Отправить личное сообщение для MRJ Посмотреть профиль Найти все сообщения от MRJ
 
Регистрация: 03.03.2014
Сообщений: 25

все решено

Последний раз редактировалось MRJ, 31.08.2015 в 17:51.
Ответить с цитированием
  #7 (permalink)  
Старый 01.09.2015, 05:24
MRJ MRJ вне форума
Интересующийся
Отправить личное сообщение для MRJ Посмотреть профиль Найти все сообщения от MRJ
 
Регистрация: 03.03.2014
Сообщений: 25

Кто знает, он отрисовывает только png? У меня генерируется png даже если исходник стоит jpg. Кто-нибудь знает как изменить?
Ответить с цитированием
  #8 (permalink)  
Старый 01.09.2015, 06:53
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от MRJ
Кто знает, он отрисовывает только png?
PNG, JPEG - это форматы для хранения, а canvas работает с распакованным из формата изображением, которое ни png, ни jpeg, ни что другое, это сырец. А вот получить его на выходе можно уже в формате для хранения, в canvas всего два - jpeg и png по умолчанию. Нужно jpg, тогда, например, canvas.toDataURL('image/jpeg').
Ответить с цитированием
  #9 (permalink)  
Старый 01.09.2015, 07:27
MRJ MRJ вне форума
Интересующийся
Отправить личное сообщение для MRJ Посмотреть профиль Найти все сообщения от MRJ
 
Регистрация: 03.03.2014
Сообщений: 25

laimas,

А как это прописать здесь??? Изображение вставляется не в canvas а в обычном div все рисуется.. Пробовал ничего не получается (

<script type="text/javascript">
	//<![CDATA[
	$(window).load(function(){
	var stage = new Kinetic.Stage({
		container: 'container',
		width: 500,
		height: 400
	});
	var layer = new Kinetic.Layer();
	stage.add(layer);


	var image = new Image();
	image.onload = function () {

		var image1 = new Kinetic.Image({
			x: 0,
			y: 0,
			width: 0,
			height: 0,
			image: image,
		});
		layer.add(image1);

		layer.draw();

	}
	image.src = "/images/top3d.jpg";

	$("#addbutton").click(function () {

		// simple label
		var label = new Kinetic.Label({
			x: 15,
			y: 10,
			draggable: false
		});

		label.add(new Kinetic.Text({
			text: $("#newtext").val(),
			fontFamily: 'Georgia',
			fontSize: 34,
			padding: 10,
			fill: 'white'
		}));

		layer.add(label);

		layer.draw();

	});
	});//]]> 
	</script>
Ответить с цитированием
  #10 (permalink)  
Старый 01.09.2015, 07:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от MRJ
Изображение вставляется не в canvas а в обычном div все рисуется..
И какие тогда проблемы? В этом случае бы будь у вас хоть GIF, в вашем div этот формат был бы и вставлен.

Судя по параметрам, Kinetic отрисовывает изображение, вставляет в него текст (?), и еще что-то, я не в курсе чего, а сделать это он может только используя canvas. Открывайте исходный код Kinetic, ищите в нем где возвращается изображение, и указывайте нужный вам формат.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03