httpng 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +16 -2
- data/lib/httpng/assets/httpng.js +63 -27
- data/lib/httpng/version.rb +1 -1
- metadata +5 -5
data/README.md
CHANGED
|
@@ -4,7 +4,10 @@ httpng - A local server for snapshotting HTML elements
|
|
|
4
4
|
## DESCRIPTION
|
|
5
5
|
|
|
6
6
|
Httpng is a local server that you can run if you want to use HTML5 & CSS3 to
|
|
7
|
-
design but you want to export the page elements as PNGs.
|
|
7
|
+
design but you want to export the page elements as PNGs. The server uses the
|
|
8
|
+
[html2canvas]([http://html2canvas.hertzen.com/]) library to render the elements
|
|
9
|
+
on the screen. Please see the limitations section of this README for more
|
|
10
|
+
information about what can and cannot be rendered.
|
|
8
11
|
|
|
9
12
|
Httpng follows the rules of [Semantic Versioning](http://semver.org/).
|
|
10
13
|
|
|
@@ -30,7 +33,7 @@ by setting the `--port` or `-p` option on the command line.
|
|
|
30
33
|
## EXPORTING
|
|
31
34
|
|
|
32
35
|
Once your server is running, simple add the following code to your HTML page in
|
|
33
|
-
the
|
|
36
|
+
the `<head>` tag:
|
|
34
37
|
|
|
35
38
|
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
|
|
36
39
|
<script src="/httpng.js"></script>
|
|
@@ -57,3 +60,14 @@ simply use the `--output` or `-o` arguments on the command line:
|
|
|
57
60
|
|
|
58
61
|
$ httpng -o /path/to/my_output_dir
|
|
59
62
|
|
|
63
|
+
|
|
64
|
+
## Limitations
|
|
65
|
+
|
|
66
|
+
There are a few limitations with HTTPNG:
|
|
67
|
+
|
|
68
|
+
1. Text directly in the exported element will not render. For example, placing
|
|
69
|
+
text in a DIV (`<div>foo</div>`) will not render but putting the text in a
|
|
70
|
+
span or p will work: `<div><span>foo</span></div>`
|
|
71
|
+
|
|
72
|
+
1. Any limitation of the html2canvas library:
|
|
73
|
+
[http://html2canvas.hertzen.com/](http://html2canvas.hertzen.com/).
|
data/lib/httpng/assets/httpng.js
CHANGED
|
@@ -4,51 +4,87 @@ document.write('<script src="/jquery.plugin.html2canvas.js"></script>');
|
|
|
4
4
|
|
|
5
5
|
// HTTPNG Namespace.
|
|
6
6
|
Httpng = {
|
|
7
|
+
PENDING: 'pending',
|
|
8
|
+
SUCCESS: 'success',
|
|
9
|
+
ERROR: 'error',
|
|
10
|
+
|
|
7
11
|
// Send all elements marked for export to server.
|
|
8
12
|
export: function() {
|
|
9
|
-
|
|
13
|
+
// Build queue of all elements.
|
|
14
|
+
var queue = [];
|
|
15
|
+
$.each($('[data-export]'), function(index, elem) {
|
|
16
|
+
queue.push({status:Httpng.PENDING, element:elem});
|
|
17
|
+
});
|
|
10
18
|
|
|
11
|
-
//
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
if(errors.length > 0) {
|
|
19
|
-
alert(errors.join("\n"));
|
|
20
|
-
}
|
|
21
|
-
// Otherwise show success.
|
|
22
|
-
else {
|
|
23
|
-
alert('OK: ' + completedCount + ' element' + (completedCount == 1 ? '' : 's' ) + ' saved.')
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
};
|
|
19
|
+
// Begin processing the queue.
|
|
20
|
+
Httpng.process(queue);
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
// Saves the next element in a queue.
|
|
24
|
+
process: function(queue) {
|
|
25
|
+
var stats = Httpng.getQueueStats(queue);
|
|
27
26
|
|
|
28
|
-
//
|
|
29
|
-
|
|
27
|
+
// Execute html2canvas on next pending item.
|
|
28
|
+
if(stats.next != null) {
|
|
29
|
+
var item = stats.next;
|
|
30
|
+
var element = item.element;
|
|
30
31
|
var name = $(element).data('export');
|
|
31
32
|
|
|
32
33
|
$(element).html2canvas({
|
|
33
34
|
onrendered: function(canvas) {
|
|
34
|
-
var data = canvas.toDataURL('image/png')
|
|
35
|
+
var data = canvas.toDataURL('image/png');
|
|
36
|
+
data = data.replace(/^data:image\/png;base64,/, '');
|
|
35
37
|
|
|
36
38
|
$.post(
|
|
37
39
|
'/export',
|
|
38
40
|
{name:name, data:data}
|
|
39
41
|
)
|
|
40
42
|
.complete(function() {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
+
item.status = Httpng.SUCCESS;
|
|
44
|
+
Httpng.process(queue);
|
|
43
45
|
})
|
|
44
46
|
.error(function() {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
showComplete();
|
|
47
|
+
item.status = Httpng.ERROR;
|
|
48
|
+
Httpng.process(queue);
|
|
48
49
|
});
|
|
49
50
|
}
|
|
50
|
-
})
|
|
51
|
-
}
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// If no more items are pending then show status message.
|
|
55
|
+
else {
|
|
56
|
+
if(stats.error == 0) {
|
|
57
|
+
alert("OK: " + stats.success + " element" + (stats.success == 1 ? '' : 's' ) + " saved.");
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
alert("Unable to save " + stats.error + " elements.");
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
// Calculates stats on the queue include pending/success/error count and
|
|
66
|
+
// next pending item.
|
|
67
|
+
getQueueStats: function(queue) {
|
|
68
|
+
var stats = {pending:0, success:0, error:0, next:null};
|
|
69
|
+
|
|
70
|
+
for(var i in queue) {
|
|
71
|
+
var item = queue[i];
|
|
72
|
+
|
|
73
|
+
switch(item.status) {
|
|
74
|
+
case Httpng.PENDING:
|
|
75
|
+
stats.pending++;
|
|
76
|
+
|
|
77
|
+
if(stats.next == null) {
|
|
78
|
+
stats.next = item;
|
|
79
|
+
}
|
|
80
|
+
break;
|
|
81
|
+
|
|
82
|
+
case Httpng.SUCCESS: stats.success++; break;
|
|
83
|
+
case Httpng.ERROR: stats.error++; break;
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return stats;
|
|
52
88
|
}
|
|
53
89
|
};
|
|
54
90
|
|
data/lib/httpng/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: httpng
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.1
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -13,7 +13,7 @@ date: 2012-03-15 00:00:00.000000000 Z
|
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: OptionParser
|
|
16
|
-
requirement: &
|
|
16
|
+
requirement: &70196687482020 !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ~>
|
|
@@ -21,10 +21,10 @@ dependencies:
|
|
|
21
21
|
version: 0.5.1
|
|
22
22
|
type: :runtime
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements: *
|
|
24
|
+
version_requirements: *70196687482020
|
|
25
25
|
- !ruby/object:Gem::Dependency
|
|
26
26
|
name: sinatra
|
|
27
|
-
requirement: &
|
|
27
|
+
requirement: &70196687481480 !ruby/object:Gem::Requirement
|
|
28
28
|
none: false
|
|
29
29
|
requirements:
|
|
30
30
|
- - ~>
|
|
@@ -32,7 +32,7 @@ dependencies:
|
|
|
32
32
|
version: 1.3.2
|
|
33
33
|
type: :runtime
|
|
34
34
|
prerelease: false
|
|
35
|
-
version_requirements: *
|
|
35
|
+
version_requirements: *70196687481480
|
|
36
36
|
description:
|
|
37
37
|
email:
|
|
38
38
|
- benbjohnson@yahoo.com
|