Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   HTML5 CANVAS (https://javascript.ru/forum/offtopic/29201-html5-canvas.html)

slava878787 19.06.2012 15:59

HTML5 CANVAS
 
Помогите решить проблему
надо чтоб при нажатии на кнопку все сожержимое Canvas переместилось в новое окно... в содержимое входит - рисунки (то есть грубо говоря сделать скрин-шот содержимого канваса)

DjDiablo 19.06.2012 16:16

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

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


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

slava878787 19.06.2012 16:23

спасибо дружище, попробую

slava878787 20.06.2012 10:37

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

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 переместилось в новое окно

slava878787 20.06.2012 11:31

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

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; // дописаные строки

};

slava878787 20.06.2012 11:32

оно отображает пустой рисунок, в чем проблема??спасибо

slava878787 20.06.2012 11:44

вот статейку нашел http://www.html5canvastutorials.com/...g-as-an-image/

vadim5june 20.06.2012 11:45

Цитата:

Сообщение от slava878787 (Сообщение 182694)
оно отображает пустой рисунок, в чем проблема??спасибо

это может быть если рисунок загружается с локального диска или с другого домена

slava878787 20.06.2012 12:05

я понял ошибку надо было еще переконвертировать изображение в 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);


};


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

vadim5june 20.06.2012 12:34

Цитата:

Сообщение от slava878787 (Сообщение 182708)
нет рисунок формируется з канваса!!!!!просто он был в кодировке use64

а теперь работает?

slava878787 20.06.2012 13:10

не работает незнаю как перекодировать...
вот я так пробовал перекодировать но.....
Canvas2Image.saveAsPNG(canvasl00);

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

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

vadim5june 20.06.2012 13:18

Цитата:

Сообщение от slava878787 (Сообщение 182728)
не работает незнаю как перекодировать...
вот я так пробовал перекодировать но.....

я их пример с img сделал-может поможет
http://all-html5.narod.ru/2/ctxImg1.htm

slava878787 20.06.2012 13:31

их ето чей пример?
ето канвас выводится??

vadim5june 20.06.2012 13:37

Цитата:

Сообщение от slava878787 (Сообщение 182736)
их ето чей пример?
ето канвас выводится??

их это вот этот
http://www.html5canvastutorials.com/...g-as-an-image/
картинка выводится в канвас а потом через dataURL в img

slava878787 20.06.2012 17:32

ничего не получается.............................
у кого какие еще будут идеи?

slava878787 20.06.2012 17:33

как сделать ( грубо говоря) скриншот canvas-a html5?????????

slava878787 21.06.2012 14:38

вот зделал по етому примеру
http://www.html5canvastutorials.com/...with-kineticjs

а все перед етим не работало потому что у меня было несколько слоев canvas-а и тот канвас который мне был нужен не имел ид .... поетому и игрался так долго

slava878787 21.06.2012 14:39

всем спасибо!!!

Александр1991 22.06.2014 18:40

canvs в HTML5
 
вот на что способен HTML5 я просто офигел http://hard-code.esy.es/

kobezzza 22.06.2014 19:54

Цитата:

Сообщение от Александр1991 (Сообщение 317644)
вот на что способен HTML5 я просто офигел http://hard-code.esy.es/

http://www.opennet.ru/opennews/art.shtml?num=39294
https://developer.cdn.mozilla.net/me...age/index.html

l-liava-l 23.06.2014 02:32

Цитата:

вот на что способен HTML5 я просто офигел http://hard-code.esy.es/
Нужно заявление написать, в комнате нет выхода, программистов удерживают((
http://hard-code.esy.es/room.html


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