httpng 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|