Форум

dmivasant · #1 (**permalink**) 09.03.2014, 16:30

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

T-sh · #2 (**permalink**) 11.03.2014, 16:13

$30 будет стоить.

Если до утра никто не возьмется или сами не справитесь, могу сделать.

devote · #3 (**permalink**) 11.03.2014, 17:02

ну дык и сделайте как у них, подключите три скрипта и реализуйте сохранение как в демо:

<!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://eligrey.com/demos/FileSaver.js/Blob.js"></script>
    <script type="text/javascript" src="http://eligrey.com/demos/FileSaver.js/canvas-toBlob.js"></script>
	<script type="text/javascript" src="http://eligrey.com/demos/FileSaver.js/FileSaver.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($('#downimg'), {
                proxy: 'http://html2canvas.appspot.com/query',
                onrendered: function (canvas) {
                    canvas.toBlob(function(blob) {
                        saveAs(blob, "ololo.png");
                    }, "image/png");
                }
            });
        }
    </script>
  
    <a href="javascript:void(0)" onClick="downimg()" >SAVE</a>
</body>
</html>

dmivasant · #4 (**permalink**) 11.03.2014, 17:51

devote,
Почемуто в opera и сафаре не сохроняет, а открывает в новой вкладке.

devote · #5 (**permalink**) 11.03.2014, 18:00

dmivasant,
может просто proxy нужно поменять, там вшито старое proxy.

Изменил код в топике выше выше.

ЗЫ. Хотя может опера и сафари не реализуют данную фичу

devote · #6 (**permalink**) 11.03.2014, 18:07

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

devote,
Почемуто в opera и сафаре не сохроняет, а открывает в новой вкладке.

А вот это http://eligrey.com/demos/FileSaver.js/ демо работает в сафари и опере? просто у меня щас нет возможности тестить

dmivasant · #7 (**permalink**) 12.03.2014, 08:28

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

А вот это http://eligrey.com/demos/FileSaver.js/ демо работает в сафари и опере? просто у меня щас нет возможности тестить

Проверел, тоже не работает.

devote · #8 (**permalink**) 12.03.2014, 10:15

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

Проверел, тоже не работает.

Ну значит они в пролете, либо юзать тот первый вариант что вы привели. А что бы имя можно было вбить, можно Flash использовать в качестве посредника)

dmivasant · #9 (**permalink**) 14.03.2014, 17:35

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

ну дык и сделайте как у них, подключите три скрипта и реализуйте сохранение как в демо:

<!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://eligrey.com/demos/FileSaver.js/Blob.js"></script>
    <script type="text/javascript" src="http://eligrey.com/demos/FileSaver.js/canvas-toBlob.js"></script>
	<script type="text/javascript" src="http://eligrey.com/demos/FileSaver.js/FileSaver.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($('#downimg'), {
                proxy: 'http://html2canvas.appspot.com/query',
                onrendered: function (canvas) {
                    canvas.toBlob(function(blob) {
                        saveAs(blob, "ololo.png");
                    }, "image/png");
                }
            });
        }
    </script>
  
    <a href="javascript:void(0)" onClick="downimg()" >SAVE</a>
</body>
</html>

Выше вкоде все работает, а перенашу на другой скрип не работает.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script type="text/javascript" src="http://eligrey.com/demos/FileSaver.js/Blob.js"></script>
    <script type="text/javascript" src="http://eligrey.com/demos/FileSaver.js/canvas-toBlob.js"></script>
    <script type="text/javascript" src="http://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="http://night-creature.com/html2canvas.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style type='text/css'>
  #heder {
	height: 126px;
	width: 100%;
	margin-bottom:6px;
}
 #h{ 
    margin-left:30px;
    width:100%;
    height:500px ;
    overflow: scroll;
    position:relative
  }
#contener {
  background-color: #87CEEB;
	background-image: url(../img/tiny_grid.png);
	background-repeat:repeat;
	min-height:590px;
	min-width: 950px;
	width: 850px;
	float:left;
}
#contener div{
	position: absolute;
}
.content{
	width:100%;
}

.dropp {
	width:300%;
}
.content img{
    display: inline-block;
	margin: 5px 5px 0 0;
}
.dropp div{
   display: inline-block;
}

/*-----------------------------------------------*/
.tabs {
      position: relative;
      min-height: 150px; /* This part sucks */
      clear: both;
      margin: 5px 0;
	  font-size:12px;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee;
      padding: 5px;
      border: 1px solid #ccc;
      margin-left: -1px;
      position: relative;
      left: 1px;
    }
    .tab [type=radio] {
      display: none;
    }
    .content {
		height:100px;
      position: absolute;
      top: 18px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      border: 1px solid #ccc;
	  overflow-x: scroll;
    }
    .content > * {
      opacity: 0;

      -webkit-transform: translate3d(0, 0, 0);

      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);

      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
	[type=radio]:checked ~ label ~ .content > * {
      opacity: 1;

      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
/*---------------------------------------------------------*/
#button {
	position: fixed;
	top: 300px;
	right: 0;
	background: #CCC;
	width: 28px;
	height: 50px;
	font: 40px Georgia;
	color: #FFF;
	text-align: center;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius:5px 0 0 5px ;
	-moz-border-radius:5px 0 0 5px  ;
	border-radius:5px 0 0 5px ;
	}
#s_panel {
	position: fixed;
	top: 136px;
	right: -300px;
	border: 1px solid #999;
	width: 290px;
	height: 300px;
	padding: 5px;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-border-radius:  5px 0 0 5px;
	-moz-border-radius:   5px 0 0 5px;
	border-radius:   5px 0 0 5px;
	}
#button:hover {
	right: 300px;
}
#button:hover #s_panel {
	right: 0;
}

  </style>

</head>
<body>
<script language="javascript">

$(window).load(function () {
function downimg(){
            html2canvas($('#contener'), {
                onrendered: function (canvas) {
                    canvas.toBlob(function(blob) {
                        saveAs(blob, "ololo.png");
                    }, "image/png");
                }
            });
        }	
		
  $('div[id*=element]').draggable({
        containment: "#wraper",
        revert: "invalid",
        grid: [ 20, 20 ],
        opacity: 0.5,
        scroll: false,
        zIndex: 35,
        appendTo: "body",
        helper: "clone",
        cursor: "move",
        stack: "div[id*=element] > img"
    })
 
$("#contener").droppable({
    accept: "#heder > .tabs > .tab >  .content > .dropp > div[id*=element]",
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        var element = $(ui.draggable);
        element.fadeIn(1000, function () {
          var pos =  $("#contener").offset(),
           el =  $(this).clone();
                 el.css({"top": ($(ui.helper).offset().top - pos.top) - 15, "left":$(ui.helper).offset().left-pos.left})
                .addClass("newElement")
                .appendTo("#contener")
                .draggable({containment: "#contener", opacity: 0.5, stack: "div[id*=element]", cursor: "move"})
                .find('img').attr({'width': '','height': ''})
                
           });
        }});
		
     });

</script>
    <a href="javascript:void(0)" onClick="downimg()" >SAVE</a>
 <div id="heder">
                <div class="tabs">
                   <div class="tab">
                       <input type="radio" id="tab-1" name="tab-group-1" checked>
                       <label for="tab-1">Однапиксельные рамки</label>
                       <div class="content">

                       </div>
                   </div>

                   <div class="tab">
                       <input type="radio" id="tab-2" name="tab-group-1">
                       <label for="tab-2">Элементы формы</label>

                       <div class="content">
                       
                           <div class="dropp">
                      			<div id="element1"  class="uvelihin"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element2" class="img"><div class="delete"></div><img src="http://javascript.ru/img/ws_1.png" width="115" height="66" /><div class="resaze"></div></div>
                      			<div id="element3" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="183" height="23" /><div class="resaze"></div></div>
                      			<div id="element4" class="img"><div class="delete"></div><img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="115" height="66" /><div class="resaze"></div></div>
                          </div>
                       </div>
                   </div>
                </div>
              </div>  
<div id="h">
	<div id="contener"></div>
</div>
   
  
</body>
</html>

devote · #10 (**permalink**) 14.03.2014, 17:48

этот метод

function downimg(){

надо сделать глобальным, либо вынести его из

$(window).load(function () {

либо сделать глобальным, то есть заменить строку:

function downimg(){

на вот эту:

window.downimg = function(){

Форум

Справочник

Discord чат

Курсы javascript