Javascript.RU

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

Как правильно забрать картинку с сервера?
Здравствуйте.
С ЯваСкриптом на "Ваше Величество". Очень нужна помощь знающих людей.

Задача скрипта: При наведении курсора на ссылку получить с сервера сгенерированную картинку. После того как убрать курсор с ссылки, картинка должна исчезнуть.

Собственно нужно взять в ссылке с классом .ris строку data-ris и отправить ее GETом в php скрипт, скрипт должен вернуть картинку, в зависимости от того какая строка была передана. Картинка должна будет находится в div'е с классом .ds

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Вызов картинки</title>
</head>
<body>
<p>текст текст текст <a href="#" data-ris="ris1,10,10" class="ris">ссылка</a> текст текст текст</p>
<p>текст текст текст <a href="#" data-ris="ris2,15,20" class="ris">ссылка</a> текст текст текст</p>
</body>
</html>


С большим трудом нашел в гугле что-то более-менее работающее.
$(document).ready(function(){
	
$(function() {

$(".ris").hover(function(){
var item_id = $(this).attr("data-ris");
var qwe = $(this);
$.ajax({
	type: "get",
	url: "script.php",
	data: {ris: item_id},
	success: function(data){
	$('.ds').append(data);
	},
  
	beforeSend: function(){
	qwe.append("<div class='ds'></div>");
	},
  
	complete: function() {

	}
  
});
	},function () {
		$(".ds").remove();
	  }
	);
});
});


На скрипт уходит к примеру строка ris1,10,10
ris1 - будет название рисунка
10,10 координаты дополнительного текста на этой картинке

header("Content-type: image/png");

// рисуем картинку
function CreateRis ($img, $x, $y){
$img = $img.'.png';
$img = imageCreateFromPng($img);
$dot = imagecolorallocate($img, 0, 255, 255);
imagestring($img, 5, $x, $y, "+", $dot);
imagePng($img);
ImageDestroy($img);
}

// показываем картинку
$ris = $_GET['ris'];
list($images, $x, $y) = explode(",", $ris);
CreateRis ($images, $x, $y);


В чем собственно проблема.

Если просто вызвать пхп страницу с заданным GET запросом (script.php?ris=ris1,10,10) то рисунок отображается нормально.

Если попытаться навести курсор на ссылку вылазят кракозябры:





Если в пхп убрать объявление заголовка, то тогда и при прямом вызове скрипта с заданным запросом будут кракозябры.

Может кто-нибудь сможет подсказать как можно вылечить это?

Все файлы в UTF-8
Ответить с цитированием
  #2 (permalink)  
Старый 27.07.2012, 16:15
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Serh
Может кто-нибудь сможет подсказать как можно вылечить это?
а что вы хотели? что бы вам магическим образом картинка превратилась во что-то типо ссылку на ресурс откуда ее можно получить? Понятно дело что картинку отправляете, картинку и получаете.. Для тега img она вполне валидная.. Если же хотите получить ее в виде данных что бы потом засунуть кудато. То в первую очередь картинка не должна быть огромной, а во вторых это можно сделать через base64 а уж потом подсунуть куда надо картинку через data:URI
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #3 (permalink)  
Старый 27.07.2012, 16:25
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

// рисуем картинку
function CreateRis ($img, $x, $y){
$img = $img.'.png';
$img = imageCreateFromPng($img);
$dot = imagecolorallocate($img, 0, 255, 255);
imagestring($img, 5, $x, $y, "+", $dot);
imagePng($img);
ImageDestroy($img);
}
 
// показываем картинку
$ris = $_GET['ris'];
list($images, $x, $y) = explode(",", $ris);

ob_start(); // не даем отправить в браузер
CreateRis ($images, $x, $y);
$image_data = ob_get_contents(); // получим буфер
ob_end_clean(); // закроем сборку

echo base64_encode( $image_data ); // отдаем браузеру закодированную картинку в base64

Код в JS
success: function(data){
    $('.ds').css("background-image", "url(data:image/png;base64," + data + ")");
    },
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #4 (permalink)  
Старый 27.07.2012, 16:27
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

только размеры выставить у своего <div class='ds'></div> не забудьте, а то вы просто не увидите картинку
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 30.07.2012, 14:05
Новичок на форуме
Отправить личное сообщение для Serh Посмотреть профиль Найти все сообщения от Serh
 
Регистрация: 27.07.2012
Сообщений: 2

Благодарю. Все заработало как надо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вывести картинку по запросу Bon Events/DOM/Window 2 04.04.2012 02:20
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 23:14
HTML5 Как сделать, чтобы можно было двигать картинку мышью? Бобр Общие вопросы Javascript 2 18.06.2010 21:22
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19