talksik/FileSaver.js
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Eli Grey
2011-07-14 23:28:11 -04:00
commit 5b94c44407
8 changed files with 605 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/demo.css
+55
View File
@@ -0,0 +1,55 @@
html {
background-color: #DDD;
}
body {
width: 900px;
margin: 0 auto;
font-family: Verdana, Helvetica, Arial, sans-serif;
box-shadow: 0 0 5px #000;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
padding: 7px 25px;
background-color: #FFF;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", serif;
}
h2, form {
text-align: center;
}
form {
margin-top: 5px;
}
.input {
width: 500px;
height: 300px;
margin: 0 auto;
display: block;
}
section {
margin-top: 40px;
}
dt {
font-weight: bold;
font-size: larger;
}
#canvas {
cursor: crosshair;
}
#canvas, #html {
border: 1px solid black;
}
.filename {
text-align: right;
}
#html {
box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
overflow: auto;
padding: 1em;
}
dt:target {
background-color: Highlight;
color: HighlightText;
}
demo/demo.js
+205
View File
@@ -0,0 +1,205 @@
/* FileSaver.js demo script
* 2011-07-14
*
* By Eli Grey, http://eligrey.com
* License: X11/MIT
* See LICENSE.md
*/
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
(function(view) {
"use strict";
// The canvas drawing portion of the demo is based off the demo at
// http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
var
document = view.document
, $ = function(id) {
return document.getElementById(id);
}
, session = view.sessionStorage
, BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder
, canvas = $("canvas")
, canvas_options_form = $("canvas-options")
, canvas_filename = $("canvas-filename")
, canvas_clear_button = $("canvas-clear")
, text = $("text")
, text_options_form = $("text-options")
, text_filename = $("text-filename")
, html = $("html")
, html_options_form = $("html-options")
, html_filename = $("html-filename")
, ctx = canvas.getContext("2d")
, drawing = false
, x_points = session.x_points || []
, y_points = session.y_points || []
, drag_points = session.drag_points || []
, add_point = function(x, y, dragging) {
x_points.push(x);
y_points.push(y);
drag_points.push(dragging);
}
, draw = function(){
canvas.width = canvas.width;
ctx.lineWidth = 6;
ctx.lineJoin = "round";
ctx.strokeStyle = "#000000";
var
i = 0
, len = x_points.length
;
for(; i < len; i++) {
ctx.beginPath();
if (i && drag_points[i]) {
ctx.moveTo(x_points[i-1], y_points[i-1]);
} else {
ctx.moveTo(x_points[i]-1, y_points[i]);
}
ctx.lineTo(x_points[i], y_points[i]);
ctx.closePath();
ctx.stroke();
}
}
, stop_drawing = function() {
drawing = false;
}
// Title guesser and document creator available at https://gist.github.com/1059648
, guess_title = function(doc) {
var
h = "h6 h5 h4 h3 h2 h1".split(" ")
, i = h.length
, headers
, header_text
;
while (i--) {
headers = doc.getElementsByTagName(h[i]);
for (var j = 0, len = headers.length; j < len; j++) {
header_text = headers[j].textContent.trim();
if (header_text) {
return header_text;
}
}
}
}
, doc_impl = document.implementation
, create_html_doc = function(html) {
var
dt = doc_impl.createDocumentType('html', null, null)
, doc = doc_impl.createDocument("http://www.w3.org/1999/xhtml", "html", dt)
, doc_el = doc.documentElement
, head = doc_el.appendChild(doc.createElement("head"))
, charset_meta = head.appendChild(doc.createElement("meta"))
, title = head.appendChild(doc.createElement("title"))
, body = doc_el.appendChild(doc.createElement("body"))
, i = 0
, len = html.childNodes.length
;
charset_meta.setAttribute("charset", html.ownerDocument.characterSet);
for (; i < len; i++) {
body.appendChild(doc.importNode(html.childNodes.item(i), true));
}
var title_text = guess_title(doc);
if (title_text) {
title.appendChild(doc.createTextNode(title_text));
}
return doc;
}
;
canvas.width = 500;
canvas.height = 300;
if (typeof x_points === "string") {
x_points = JSON.parse(x_points);
} if (typeof y_points === "string") {
y_points = JSON.parse(y_points);
} if (typeof drag_points === "string") {
drag_points = JSON.parse(drag_points);
} if (session.canvas_filename) {
canvas_filename.value = session.canvas_filename;
} if (session.text) {
text.value = session.text;
} if (session.text_filename) {
text_filename.value = session.text_filename;
} if (session.html) {
html.innerHTML = session.html;
} if (session.html_filename) {
html_filename.value = session.html_filename;
}
drawing = true;
draw();
drawing = false;
canvas_clear_button.addEventListener("click", function() {
canvas.width = canvas.width;
x_points.length =
y_points.length =
drag_points.length =
0;
}, false);
canvas.addEventListener("mousedown", function(event) {
drawing = true;
add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, false);
draw();
}, false);
canvas.addEventListener("mousemove", function(event) {
if (drawing) {
add_point(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop, true);
draw();
}
}, false);
canvas.addEventListener("mouseup", stop_drawing, false);
canvas.addEventListener("mouseout", stop_drawing, false);
canvas_options_form.addEventListener("submit", function(event) {
event.preventDefault();
canvas.toBlob(function(blob) {
saveAs(
blob
, (canvas_filename.value || canvas_filename.placeholder) + ".png"
);
}, "image/png");
}, false);
text_options_form.addEventListener("submit", function(event) {
event.preventDefault();
var bb = new BlobBuilder;
bb.append(text.value || text.placeholder);
saveAs(
bb.getBlob("text/plain;charset=" + document.characterSet)
, (text_filename.value || text_filename.placeholder) + ".txt"
);
}, false);
html_options_form.addEventListener("submit", function(event) {
event.preventDefault();
var
bb = new BlobBuilder
, xml_serializer = new XMLSerializer
, doc = create_html_doc(html)
;
bb.append(xml_serializer.serializeToString(doc));
saveAs(
bb.getBlob("application/xhtml+xml;charset=" + document.characterSet)
, (html_filename.value || html_filename.placeholder) + ".xhtml"
);
}, false);
view.addEventListener("unload", function() {
session.x_points = JSON.stringify(x_points);
session.y_points = JSON.stringify(y_points);
session.drag_points = JSON.stringify(drag_points);
session.canvas_filename = canvas_filename.value;
session.text = text.value;
session.text_filename = text_filename.value;
session.html = html.innerHTML;
session.html_filename = html_filename.value;
}, false);
}(self));
demo/demo.min.js
Vendored
+2
View File
@@ -0,0 +1,2 @@
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
(function(o){"use strict";var t=o.document,g=function(A){return t.getElementById(A)},b=o.sessionStorage,j=o.BlobBuilder||o.WebKitBlobBuilder||o.MozBlobBuilder,f=g("canvas"),s=g("canvas-options"),y=g("canvas-filename"),q=g("canvas-clear"),r=g("text"),u=g("text-options"),h=g("text-filename"),n=g("html"),e=g("html-options"),i=g("html-filename"),v=f.getContext("2d"),z=false,a=b.x_points||[],p=b.y_points||[],d=b.drag_points||[],k=function(A,C,B){a.push(A);p.push(C);d.push(B)},m=function(){f.width=f.width;v.lineWidth=6;v.lineJoin="round";v.strokeStyle="#000000";var B=0,A=a.length;for(;B<A;B++){v.beginPath();if(B&&d[B]){v.moveTo(a[B-1],p[B-1])}else{v.moveTo(a[B]-1,p[B])}v.lineTo(a[B],p[B]);v.closePath();v.stroke()}},c=function(){z=false},x=function(E){var D="h6 h5 h4 h3 h2 h1".split(" "),C=D.length,F,G;while(C--){F=E.getElementsByTagName(D[C]);for(var B=0,A=F.length;B<A;B++){G=F[B].textContent.trim();if(G){return G}}}},w=t.implementation,l=function(D){var B=w.createDocumentType("html",null,null),J=w.createDocument("http://www.w3.org/1999/xhtml","html",B),A=J.documentElement,H=A.appendChild(J.createElement("head")),K=H.appendChild(J.createElement("meta")),I=H.appendChild(J.createElement("title")),E=A.appendChild(J.createElement("body")),C=0,G=D.childNodes.length;K.setAttribute("charset",D.ownerDocument.characterSet);for(;C<G;C++){E.appendChild(J.importNode(D.childNodes.item(C),true))}var F=x(J);if(F){I.appendChild(J.createTextNode(F))}return J};f.width=500;f.height=300;if(typeof a==="string"){a=JSON.parse(a)}if(typeof p==="string"){p=JSON.parse(p)}if(typeof d==="string"){d=JSON.parse(d)}if(b.canvas_filename){y.value=b.canvas_filename}if(b.text){r.value=b.text}if(b.text_filename){h.value=b.text_filename}if(b.html){n.innerHTML=b.html}if(b.html_filename){i.value=b.html_filename}z=true;m();z=false;q.addEventListener("click",function(){f.width=f.width;a.length=p.length=d.length=0},false);f.addEventListener("mousedown",function(A){z=true;k(A.pageX-f.offsetLeft,A.pageY-f.offsetTop,false);m()},false);f.addEventListener("mousemove",function(A){if(z){k(A.pageX-f.offsetLeft,A.pageY-f.offsetTop,true);m()}},false);f.addEventListener("mouseup",c,false);f.addEventListener("mouseout",c,false);s.addEventListener("submit",function(A){A.preventDefault();f.toBlob(function(B){saveAs(B,(y.value||y.placeholder)+".png")},"image/png")},false);u.addEventListener("submit",function(A){A.preventDefault();var B=new j;B.append(r.value||r.placeholder);saveAs(B.getBlob("text/plain;charset="+t.characterSet),(h.value||h.placeholder)+".txt")},false);e.addEventListener("submit",function(B){B.preventDefault();var D=new j,A=new XMLSerializer,C=l(n);D.append(A.serializeToString(C));saveAs(D.getBlob("application/xhtml+xml;charset="+t.characterSet),(i.value||i.placeholder)+".xhtml")},false);o.addEventListener("unload",function(){b.x_points=JSON.stringify(a);b.y_points=JSON.stringify(p);b.drag_points=JSON.stringify(d);b.canvas_filename=y.value;b.text=r.value;b.text_filename=h.value;b.html=n.innerHTML;b.html_filename=i.value},false)}(self));
demo/index.xhtml
+68
View File
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
<head>
<meta charset="utf-8"/>
<title>FileSaver.js Demo</title>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.css"/>
</head>
<body>
<h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> Demo</h1>
<p>
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C <code>saveAs()</code> <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, without contacting any servers.
</p>
<section id="image-demo">
<h2>Saving an image</h2>
<canvas class="input" id="canvas" width="500" height="300"/>
<form id="canvas-options">
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
<input type="submit" value="Save"/>
<input type="button" id="canvas-clear" value="Clear"/>
</form>
</section>
<section id="text-demo">
<h2>Saving text</h2>
<textarea class="input" id="text" placeholder="Once upon a time..."/>
<form id="text-options">
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
<input type="submit" value="Save"/>
</form>
</section>
<section id="html-demo">
<h2>Saving rich text</h2>
<div class="input" id="html" contenteditable="">
<h3>Some example rich text</h3>
<ul>
<li><del>Plain</del> <ins>Boring</ins> text.</li>
<li><em>Emphasized text!</em></li>
<li><strong>Strong text!</strong></li>
<li>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
<circle cx="35" cy="35" r="35" fill="red"/>
<text x="10" y="40">image</text>
</svg>
</li>
<li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
</ul>
</div>
<form id="html-options">
<label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
<input type="submit" value="Save"/>
</form>
</section>
<section id="faq">
<h1>FAQ</h1>
<dl>
<dt>Why isn't my filename saved?</dt>
<dd>
<p>
Saving with filenames is only available in browsers that natively support either <code><a href="http://www.w3.org/TR/file-system-api/#using-localfilesystem">LocalFileSystem</a></code> or <code><a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a></code>, such as <a href="http://www.chromium.org/getting-involved/dev-channel">Google Chrome 14 dev</a>. To enable <code>LocalFileSystem</code> in Google Chrome 14 dev, launch the browser with the <code>--allow-file-access-from-files</code> and <code>--unlimited-quota-for-files</code> flags.
</p>
</dd>
</dl>
</section>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/BlobBuilder.js/master/BlobBuilder.min.js"/>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.min.js"/>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.min.js"/>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.min.js"/>
</body>
</html>