Screenshot определенной части экрана средствами javascript
Здравствуйте, уважаемые. Стоит такая задача: Превратить содержимое div-блока в картинку и предложить пользователю скачать её.
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
width:200px;
background-color: green;
}
</style>
<script type="text/javascript" src="http://night-creature.com/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="downimg">
<div>
some text
</div>
</div>
<script language="javascript">
function downimg(){
html2canvas($('#downimg'), {
onrendered: function (canvas) {
var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
}
</script>
<a href="javascript:void(0)" onClick="downimg()" >SAVE</a>
</body>
</html>
такто работает, но сохраняет без расширения.Приходиться руками писать png? что не есть хорошо. Нашол решения на сайте http://updates.html5rocks.com/2011/0...he-client-side но по англиске не понимаю, да и вобще не понял что там к чему. Хотелось бы чтоб как у ни в демо http://eligrey.com/demos/FileSaver.js/ Кто знает как это сделать:help: |
Ух ты! Не знал что такое можно провернуть в Firefox.
Подключай либы FileSaver.js и canvas-toBlob.js. Когда нужно сохранить содержимое холста, вызывай:
canvas.toBlob(function(blob) {
saveAs(blob ,"blabla.png");
}, "image/png");
|
А причем тут jQuery?
|
Цитата:
|
Так прямо этот код и вставляй, без изменений
|
Цитата:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
width:200px;
background-color: green;
}
</style>
<script src="js/FileSaver.js"></script>
<script src="js/canvas-toBlob.js"></script>
<script type="text/javascript" src="http://night-creature.com/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="downimg">
<div>
some text
</div>
</div>
<script language="javascript">
canvas.toBlob(function(blob) {
saveAs(blob ,"blabla.png");
}, "image/png");
:help:
</script>
<form id="canvas-options">
<label>
Filename:
<input id="canvas-filename" class="filename" type="text" placeholder="doodle"/>
.png
</label>
<input type="submit" value="Save"/>
<input id="canvas-clear" type="button" value="Clear"/>
</form>
</body>
</html>
|
Ну вобще-то canvas с неба не свалится. Где у тебя тут вызов функции html2canvas? В коде выше у тебя все есть, а тут уже нету.
|
Цитата:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
width:200px;
background-color: green;
}
</style>
<script src="js/FileSaver.js"></script>
<script src="js/canvas-toBlob.js"></script>
<script type="text/javascript" src="http://night-creature.com/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="downimg">
<div>
some text
</div>
</div>
<script language="javascript">
function downimg(){
html2canvas($('#contener'), {
onrendered: function (canvas) {
var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
}
canvas.toBlob(function(blob) {
saveAs(blob ,"blabla.png");
}, "image/png");
</script>
<form id="canvas-options">
<label>
Filename:
<input id="canvas-filename" class="filename" type="text" placeholder="doodle"/>
.png
</label>
<input type="submit" value="Save"/>
<input id="canvas-clear" type="button" value="Clear"/>
</form>
</body>
</html>
не работает:-E |
Цитата:
Куда вставить эту конструкцию, чтоб работала? canvas.toBlob(function(blob) { saveAs(blob ,"blabla.png"); }, "image/png"); |
Туда, где доступна переменная canvas, ясное же дело.
|
Спосибо за попытку помочь. Ну я прям вобще чайник, не чего не понял:blink:
|
:-/ внутрь onrendered засунь. А старый код что там - удали.
|
Не работает:cray:
|
А вы сами делали? У вас Работает?
|
umenia ta je samia prablema
var img = canvas.toDataURL('image/png').replace("image/png", "image/octet-stream")+".png";
a razve tak nelzia dat rashirenie failu ???? |
Спасибо danik.js BIG!!! Все работает.
|
danik.js,
Доброго времени! А я вот вашим кодом воспользовался, и немного не понял: если содержимое уходит за границу экрана вправо, то оно не будет отрисоовываться на картинке? а если вниз то отрисоовывается! можно с этим как то справиться? что бы все отрисоовывалось, не зависимо от размера экрана!? |
danik.js,
После 4 часов копания в коде в библиотеке html2canvas я понял в чем моя ошибка! ширина самого элемента 1900 а вот в него входит элемент с шириной 2100, но библиотека смотрит на ширину родительского элемента. растянул его и все получилось)))) извиняюсь за тупость! |
Почему-то не работает
Вроде все сделала как написано, но у меня страница в итоге просто обновляется и все. Кто-нибудь знает что делать?
|
dmivasant, У Вас получилось сделать?
|
Спасибо всем за код но столкнулся с траблом. В хроме работает, а фаерфокс не хочет никак. Ни ошибок ни чего :(. Причем демо страница с saveAs работает без вопросов на фаерфоксе...
function getScreenshot(){
html2canvas(jQuery('.quote-block'), {
onrendered: function(canvas) {
canvas.toBlob(function(blob) {
saveAs(blob ,"quote.png");
}, "image/png");
}
});
}
|
Цитата:
|
Честно что то получилось, но на данный момент не помню уже как и что. Вот сайтик там можно поиграться учитель-сказал.рф . Но все равно не доволен качеством скриншета, иногда он наманый иногда буквы пляшут, надо бы обновить плагин попробовать вдруг что изменили :)
|
| Часовой пояс GMT +3, время: 14:20. |