Сообщение от 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>