HTML5 CANVAS
Помогите решить проблему
надо чтоб при нажатии на кнопку все сожержимое Canvas переместилось в новое окно... в содержимое входит - рисунки (то есть грубо говоря сделать скрин-шот содержимого канваса) |
Другое окно это размытое определение :)
но думаю в любом случае это можно сделать через копирывание из канваса в канвас. imgdata=src.getImageData(0,0,width,height) - для копирывания из канваса (документация ) dst.putImageData(data,0,0) - для вставки в канвас (документация ) ха, хотя было бы забавно скопирывать сам канвас как дум элемент, интересно он вместе с содержимым скопируется или нет. |
спасибо дружище, попробую
|
все равно что то не получается
вот код загрузки страницы 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 переместилось в новое окно |
в конце я дописал две строчки вот новый код
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; // дописаные строки }; |
оно отображает пустой рисунок, в чем проблема??спасибо
|
вот статейку нашел http://www.html5canvastutorials.com/...g-as-an-image/
|
Цитата:
|
я понял ошибку надо было еще переконвертировать изображение в 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); }; но все равно не отображается !!!!!! |
Цитата:
|
не работает незнаю как перекодировать...
вот я так пробовал перекодировать но..... Canvas2Image.saveAsPNG(canvasl00); var oImgPNG = Canvas2Image.saveAsPNG(canvasl00, true); Canvas2Image.saveAsPNG(canvasl00, false, 100, 100); |
Цитата:
http://all-html5.narod.ru/2/ctxImg1.htm |
их ето чей пример?
ето канвас выводится?? |
Цитата:
http://www.html5canvastutorials.com/...g-as-an-image/ картинка выводится в канвас а потом через dataURL в img |
ничего не получается.............................
у кого какие еще будут идеи? |
как сделать ( грубо говоря) скриншот canvas-a html5?????????
|
вот зделал по етому примеру
http://www.html5canvastutorials.com/...with-kineticjs а все перед етим не работало потому что у меня было несколько слоев canvas-а и тот канвас который мне был нужен не имел ид .... поетому и игрался так долго |
всем спасибо!!!
|
canvs в HTML5
вот на что способен HTML5 я просто офигел http://hard-code.esy.es/
|
Цитата:
https://developer.cdn.mozilla.net/me...age/index.html |
Цитата:
http://hard-code.esy.es/room.html |
Часовой пояс GMT +3, время: 05:44. |