Javascript.RU

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

HTML5 CANVAS
Помогите решить проблему
надо чтоб при нажатии на кнопку все сожержимое Canvas переместилось в новое окно... в содержимое входит - рисунки (то есть грубо говоря сделать скрин-шот содержимого канваса)
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2012, 16:16
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Другое окно это размытое определение
но думаю в любом случае это можно сделать через копирывание из канваса в канвас.

imgdata=src.getImageData(0,0,width,height) - для копирывания из канваса (документация )
dst.putImageData(data,0,0) - для вставки в канвас (документация )


ха, хотя было бы забавно скопирывать сам канвас как дум элемент, интересно он вместе с содержимым скопируется или нет.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 19.06.2012 в 16:35.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2012, 16:23
Интересующийся
Отправить личное сообщение для slava878787 Посмотреть профиль Найти все сообщения от slava878787
 
Регистрация: 19.06.2012
Сообщений: 13

спасибо дружище, попробую
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2012, 10:37
Интересующийся
Отправить личное сообщение для slava878787 Посмотреть профиль Найти все сообщения от slava878787
 
Регистрация: 19.06.2012
Сообщений: 13

все равно что то не получается
вот код загрузки страницы

window.onload = function(){

$('#canvWidth').val('500');
$('#canvHeight').val('500');
cw = parseInt($('#canvWidth').val(),10);
ch = parseInt($('#canvHeight').val(),10);
// $('#layer00').css({'width'cw+100)+'px','height': (ch+100)+'px'})
$('#center').css({'width'cw+100)+'px'})
$('.kineticjs-content').css({'display':'block'})

drawSize();
addFonRect();
window.kof=1;

// addText();
//addWeb();
// reinforcment();

var sources = {
tImg: put_html5+"images/kub.jpg"

};
loadImages(sources, initStage);

};

мне надо что бы все сожержимое Canvas переместилось в новое окно
Ответить с цитированием
  #5 (permalink)  
Старый 20.06.2012, 11:31
Интересующийся
Отправить личное сообщение для slava878787 Посмотреть профиль Найти все сообщения от slava878787
 
Регистрация: 19.06.2012
Сообщений: 13

в конце я дописал две строчки вот новый код

window.onload = function(){

$('#canvWidth').val('500');
$('#canvHeight').val('500');
cw = parseInt($('#canvWidth').val(),10);
ch = parseInt($('#canvHeight').val(),10);
// $('#layer00').css({'width'cw+100)+'px','height': (ch+100)+'px'})
$('#center').css({'width'cw+100)+'px'})
$('.kineticjs-content').css({'display':'block'})

drawSize();
addFonRect();
window.kof=1;

// addText();
//addWeb();
// reinforcment();

var sources = {
tImg: put_html5+"images/kub.jpg"

};
loadImages(sources, initStage);



var dataURL = canvasl00.toDataURL(); // дописаные строки
document.getElementById("canvasImg").src = dataURL; // дописаные строки

};
Ответить с цитированием
  #6 (permalink)  
Старый 20.06.2012, 11:32
Интересующийся
Отправить личное сообщение для slava878787 Посмотреть профиль Найти все сообщения от slava878787
 
Регистрация: 19.06.2012
Сообщений: 13

оно отображает пустой рисунок, в чем проблема??спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 20.06.2012, 11:44
Интересующийся
Отправить личное сообщение для slava878787 Посмотреть профиль Найти все сообщения от slava878787
 
Регистрация: 19.06.2012
Сообщений: 13

вот статейку нашел http://www.html5canvastutorials.com/...g-as-an-image/
Ответить с цитированием
  #8 (permalink)  
Старый 20.06.2012, 11:45
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от slava878787 Посмотреть сообщение
оно отображает пустой рисунок, в чем проблема??спасибо
это может быть если рисунок загружается с локального диска или с другого домена
Ответить с цитированием
  #9 (permalink)  
Старый 20.06.2012, 12:05
Интересующийся
Отправить личное сообщение для slava878787 Посмотреть профиль Найти все сообщения от slava878787
 
Регистрация: 19.06.2012
Сообщений: 13

я понял ошибку надо было еще переконвертировать изображение в jpeg вот код после изменений

window.onload = function(){

var canvasl00 = document.getElementById('layer00'); //
var contextl00 = canvasl00.getContext('2d'); //

$('#canvWidth').val('500');
$('#canvHeight').val('500');
cw = parseInt($('#canvWidth').val(),10);
ch = parseInt($('#canvHeight').val(),10);
// $('#layer00').css({'width'cw+100)+'px','height': (ch+100)+'px'})
$('#center').css({'width'cw+100)+'px'})
$('.kineticjs-content').css({'display':'block'})

drawSize();
addFonRect();
window.kof=1;

// addText();
//addWeb();
// reinforcment();

var sources = {
tImg: put_html5+"images/kub.jpg"

};
loadImages(sources, initStage);

var dataURL = canvasl00.toDataURL(); //
document.getElementById("canvasImg").src = dataURL; //

var strDataURI = canvasl00.toDataURL();
//var strDataURI = canvasl00.toDataURL("images/jpeg");


Canvas2Image.saveAsPNG(canvasl00);

var oImgPNG = Canvas2Image.saveAsPNG(canvasl00, true);

Canvas2Image.saveAsPNG(canvasl00, false, 100, 100);


};


но все равно не отображается !!!!!!

Последний раз редактировалось slava878787, 20.06.2012 в 12:16.
Ответить с цитированием
  #10 (permalink)  
Старый 20.06.2012, 12:34
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от slava878787 Посмотреть сообщение
нет рисунок формируется з канваса!!!!!просто он был в кодировке use64
а теперь работает?
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Html5 FileApi Canvas like2dev Общие вопросы Javascript 2 17.01.2012 23:49
Canvas html5 Иваннн Оффтопик 9 16.01.2012 00:41
html5 Canvas как кэш для изображений JAre Элементы интерфейса 6 20.07.2011 03:22
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16