Форум

dmivasant · #1 (**permalink**) 26.07.2013, 12:45

Здравствуйте, уважаемые. Стоит такая задача: Превратить содержимое 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/
Кто знает как это сделать

danik.js · #2 (**permalink**) 26.07.2013, 13:11

Ух ты! Не знал что такое можно провернуть в Firefox.
Подключай либы FileSaver.js и canvas-toBlob.js.
Когда нужно сохранить содержимое холста, вызывай:

canvas.toBlob(function(blob) {
	saveAs(blob ,"blabla.png");
}, "image/png");

danik.js · #3 (**permalink**) 26.07.2013, 13:13

А причем тут jQuery?

dmivasant · #4 (**permalink**) 29.07.2013, 04:17

Сообщение от danik.js

Ух ты! Не знал что такое можно провернуть в Firefox.
Подключай либы FileSaver.js и canvas-toBlob.js.
Когда нужно сохранить содержимое холста, вызывай:

canvas.toBlob(function(blob) {
	saveAs(blob ,"blabla.png");
}, "image/png");

А можно на моем примере подробно?

danik.js · #5 (**permalink**) 29.07.2013, 04:32

Так прямо этот код и вставляй, без изменений

dmivasant · #6 (**permalink**) 29.07.2013, 05:31

Сообщение от danik.js

Так прямо этот код и вставляй, без изменений

Не понимаю я, вставил код, а нечего не работает

<!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>

danik.js · #7 (**permalink**) 29.07.2013, 05:56

Ну вобще-то canvas с неба не свалится. Где у тебя тут вызов функции html2canvas? В коде выше у тебя все есть, а тут уже нету.

dmivasant · #8 (**permalink**) 29.07.2013, 06:12

Сообщение от danik.js

Ну вобще-то 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>

не работает

dmivasant · #9 (**permalink**) 29.07.2013, 07:38

Сообщение от dmivasant

<!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>

не работает

Куда вставить эту конструкцию, чтоб работала?
canvas.toBlob(function(blob) {
saveAs(blob ,"blabla.png");
}, "image/png");

danik.js · #10 (**permalink**) 29.07.2013, 08:21

Туда, где доступна переменная canvas, ясное же дело.

Форум

Справочник

Discord чат

Курсы javascript