<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta property="og:image" content="/st/og-image.png"/>
<title>Sortable. No jQuery.</title>
<meta name="keywords" content="sortable, reorder, list, javascript, html5, drag and drop, dnd, animation, groups, angular, ng-sortable, react, mixin, effects, rubaxa"/>
<meta name="description" content="Sortable - is a minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React and any CSS library, e.g. Bootstrap."/>
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<link href="st/app.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<script>
var pic1;
function takeScreenshot() {
html2canvas($(" #view"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
pic1=canvas.toDataURL()
pic1=pic1.split('data:image/png;base64,')[1];
$('#down_button').attr( 'href' , canvas.toDataURL()) ;
$('#down_button').attr( 'download' , 'myjobdeer.png') ;
},
width: $(" #view").width()+60 ,
height: $(" #view").height()
});
}
function putb64(){
console.log(pic1)
var pic=pic1
var url = "http://up.qiniu.com/putb64/-1";
var xhr = new XMLHttpRequest();
var xhrget = new XMLHttpRequest();
var obj;
xhr.onreadystatechange=function(){
console.log(xhr.upload)
if (xhr.readyState==4){
document.getElementById("myDiv").innerHTML=xhr.responseText;
console.log('http://img.taoyouji666.com/'+JSON.parse(xhr.response).key)
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", token); //token需要自己去自己的token的url去获取
xhr.send(pic)
}
</script>
<button type="button" onclick="putb64()">发送</button>
<div id="myDiv" >
响应内容
</div>
<div class="container">
<div id="multi" style="margin-left: 30px">
<div><div data-force="5" class="layer title title_xl">Multi</div></div>
<div class="layer tile copy" id="view" data-force="30">
<div class="tile__name">Group A</div>
<div class="tile__list" >
0000000000000000000000000
<img src="st/face-01.jpg"/>
<img src="st/face-02.jpg"/>
<img src="st/face-03.jpg"/>
<img src="st/face-04.jpg"/>
</div>
</div>
<div class="layer tile remove" data-force="20">
<div class="tile__name">Group C</div>
<div class="tile__list">
<img src="st/face-08.jpg"/>
<img src="st/face-09.jpg"/>
</div>
</div>
</div>
</div>
<input type="button" value="截图" onclick="takeScreenshot()">
<a type="button" id="down_button"><input type="button" value="下载"></a>
<script src="Sortable.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.32/angular.min.js"></script>
<script src="st/app.js"></script>
<style>
.tomorrow-comment, pre .comment, pre .title {
color: #8e908c;
}
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
color: #c82829;
}
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
color: #f5871f;
}
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
color: #eab700;
}
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
color: #718c00;
}
.tomorrow-aqua, pre .css .hexcolor {
color: #3e999f;
}
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
color: #4271ae;
}
.tomorrow-purple, pre .keyword, pre .javascript .function {
color: #8959a8;
}
pre {
border: 0;
background-color: #fff;
}
pre code {
display: block;
color: #4d4d4c;
font-size: 15px;
font-family: Menlo, Monaco, Consolas, monospace;
line-height: 1.5;
padding: 30px;
}
</style>
</body>
</html>
