From 31f80ee0285719d5af302fdfd935d50bc38262f3 Mon Sep 17 00:00:00 2001 From: Abhishek Sinha Date: Thu, 2 Aug 2018 19:23:08 +0530 Subject: [PATCH] Image downloading option added --- package-lock.json | 203 ++++++++++++++++++++++++++++++++++++++ package.json | 3 +- public/css/main.css | 35 +++++++ public/js/bundle.js | 50 ++++++++-- public/js/main.js | 50 ++++++++-- views/partials/header.ejs | 1 + views/write.ejs | 16 ++- 7 files changed, 340 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4d19617..db3aef6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1028,6 +1028,12 @@ "is-arrayish": "^0.2.1" } }, + "es6-promise": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz", + "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==", + "optional": true + }, "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", @@ -1296,6 +1302,29 @@ "is-extglob": "^1.0.0" } }, + "extract-zip": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz", + "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=", + "optional": true, + "requires": { + "concat-stream": "1.6.2", + "debug": "2.6.9", + "mkdirp": "0.5.1", + "yauzl": "2.4.1" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "optional": true, + "requires": { + "ms": "2.0.0" + } + } + } + }, "extsprintf": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", @@ -1316,6 +1345,15 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, + "fd-slicer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz", + "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=", + "optional": true, + "requires": { + "pend": "~1.2.0" + } + }, "file-saver": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz", @@ -1426,6 +1464,17 @@ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" }, + "fs-extra": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz", + "integrity": "sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=", + "optional": true, + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^2.1.0", + "klaw": "^1.0.0" + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -1996,6 +2045,16 @@ "minimalistic-assert": "^1.0.1" } }, + "hasha": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/hasha/-/hasha-2.2.0.tgz", + "integrity": "sha1-eNfL/B5tZjA/55g3NlmEUXsvbuE=", + "optional": true, + "requires": { + "is-stream": "^1.0.1", + "pinkie-promise": "^2.0.0" + } + }, "helmet": { "version": "3.13.0", "resolved": "https://registry.npmjs.org/helmet/-/helmet-3.13.0.tgz", @@ -2357,6 +2416,15 @@ "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=" }, + "jsonfile": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", + "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=", + "optional": true, + "requires": { + "graceful-fs": "^4.1.6" + } + }, "jsonify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", @@ -2390,6 +2458,12 @@ "verror": "1.10.0" } }, + "kew": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz", + "integrity": "sha1-edk9LTM2PW/dKXCzNdkUGtWR15s=", + "optional": true + }, "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", @@ -2398,6 +2472,15 @@ "is-buffer": "^1.1.5" } }, + "klaw": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz", + "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=", + "optional": true, + "requires": { + "graceful-fs": "^4.1.9" + } + }, "labeled-stream-splicer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-2.0.1.tgz", @@ -2641,6 +2724,11 @@ "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==", "optional": true }, + "natives": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.4.tgz", + "integrity": "sha512-Q29yeg9aFKwhLVdkTAejM/HvYG0Y1Am1+HUkFQGn5k2j8GS+v60TVmZh6nujpEAj/qql+wGUrlryO8bF+b1jEg==" + }, "ncp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz", @@ -2772,6 +2860,11 @@ "mem": "^1.1.0" } }, + "os-tmpdir": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=" + }, "outpipe": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/outpipe/-/outpipe-1.1.1.tgz", @@ -2915,16 +3008,54 @@ "sha.js": "^2.4.8" } }, + "pend": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", + "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=", + "optional": true + }, "performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, + "phantomjs-prebuilt": { + "version": "2.1.16", + "resolved": "https://registry.npmjs.org/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz", + "integrity": "sha1-79ISpKOWbTZHaE6ouniFSb4q7+8=", + "optional": true, + "requires": { + "es6-promise": "^4.0.3", + "extract-zip": "^1.6.5", + "fs-extra": "^1.0.0", + "hasha": "^2.2.0", + "kew": "^0.7.0", + "progress": "^1.1.8", + "request": "^2.81.0", + "request-progress": "^2.0.1", + "which": "^1.2.10" + } + }, "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" }, + "pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", + "optional": true + }, + "pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", + "optional": true, + "requires": { + "pinkie": "^2.0.0" + } + }, "platform": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.5.tgz", @@ -2960,6 +3091,12 @@ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==" }, + "progress": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/progress/-/progress-1.1.8.tgz", + "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=", + "optional": true + }, "proxy-addr": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", @@ -3192,6 +3329,15 @@ "uuid": "^3.1.0" } }, + "request-progress": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-2.0.1.tgz", + "integrity": "sha1-XTa7V5YcZzqlt4jbyBQf3yO0Tgg=", + "optional": true, + "requires": { + "throttleit": "^1.0.0" + } + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -3558,6 +3704,12 @@ "acorn-node": "^1.2.0" } }, + "throttleit": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz", + "integrity": "sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=", + "optional": true + }, "through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -3580,6 +3732,14 @@ "process": "~0.11.0" } }, + "tmp": { + "version": "0.0.33", + "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", + "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==", + "requires": { + "os-tmpdir": "~1.0.2" + } + }, "to-arraybuffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", @@ -3760,6 +3920,40 @@ "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=" }, + "webshot": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/webshot/-/webshot-0.18.0.tgz", + "integrity": "sha1-BX5pJbw5cK6X7tVvwjEYV4y8/cM=", + "requires": { + "cross-spawn": "^0.2.3", + "graceful-fs": "~3.0.4", + "phantomjs-prebuilt": "^2.1.3", + "tmp": "~0.0.25" + }, + "dependencies": { + "cross-spawn": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-0.2.9.tgz", + "integrity": "sha1-vWf5bAfvtjA7f+lMHpefiEeOCjk=", + "requires": { + "lru-cache": "^2.5.0" + } + }, + "graceful-fs": { + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz", + "integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=", + "requires": { + "natives": "^1.1.0" + } + }, + "lru-cache": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz", + "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=" + } + } + }, "whatwg-url": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-2.0.1.tgz", @@ -3875,6 +4069,15 @@ "requires": { "camelcase": "^4.1.0" } + }, + "yauzl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz", + "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=", + "optional": true, + "requires": { + "fd-slicer": "~1.0.1" + } } } } diff --git a/package.json b/package.json index e52336b..9d2819f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "node-fetch": "^2.2.0", "popper.js": "^1.14.3", "qrcode": "^1.2.2", - "watchify": "^3.11.0" + "watchify": "^3.11.0", + "webshot": "^0.18.0" } } diff --git a/public/css/main.css b/public/css/main.css index b7485a7..d0dc1ae 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -7,3 +7,38 @@ img { margin-top: 5rem; } +/* + + + font-family: 'Lobster', cursive; + + font-family: 'Dancing Script', cursive; + + font-family: 'Amatic SC', cursive; + + font-family: 'Ranga', cursive; + + font-family: 'Great Vibes', cursive; + + font-family: 'Caveat', cursive; + + font-family: 'Arapey', serif; + +*/ + +img { + max-height: 1000px; + max-width: 800px; +} + +.mt-5 { + margin-top: 5rem; +} + +.span_user_msg { + font-size: 18px; + font-weight: bold; + color: black; + padding: 5px 10px; +} + diff --git a/public/js/bundle.js b/public/js/bundle.js index 6ddca6f..c3c30f3 100644 --- a/public/js/bundle.js +++ b/public/js/bundle.js @@ -27356,11 +27356,36 @@ $(document).on('keyup', '.stick_text', function() { } }); +function saveAs(uri, filename) { + var link = document.createElement('a'); + if (typeof link.download === 'string') { + link.href = uri; + link.download = filename; + + //Firefox requires the link to be in the body + document.body.appendChild(link); + + //simulate click + link.click(); + + //remove the link when done + document.body.removeChild(link); + } else { + window.open(uri); + } +} + $(document).on('click', '#bc-btn', function() { var text = $('#_bdata').val(); var _from = $('#_from').val(); var _to = $('#_to').val(); var _cardid = $('#_cardid').val(); + + var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0; + // if (!atLeastOneIsChecked) { + // alert('Please specify download option: Image and/or PDF'); + // return false; + // } $.ajax({ type: 'post', @@ -27381,20 +27406,31 @@ $(document).on('click', '#bc-btn', function() { var opts = { width: 200, errorCorrectionLevel: 'H' - } + } + + var download_pdf = $('#Checkpdf').is(":checked"); + var download_image = $('#Checkimg').is(":checked"); QRCode.toCanvas(canvas, urlstring, opts, function (error) { if (error) console.error(error) console.log('Qr generated! for : '.urlstring); html2canvas(document.getElementById("pdfcontent"), { allowTaint: true }).then(function(canvas) { - let namepdf = "flo-greetings-"+new Date().getTime()+".pdf"; - var img = canvas.toDataURL("image/png"); - var doc = new jsPDF('p', 'mm', 'a3'); - doc.addImage(img, 'PNG', 1, 2); - doc.save(namepdf); - doc.autoPrint(); + if (download_pdf==true) { + let namepdf = "flo-greetings-"+new Date().getTime()+".pdf"; + var img = canvas.toDataURL("image/png"); + var doc = new jsPDF('p', 'mm', 'a3'); + doc.addImage(img, 'PNG', 1, 2); + doc.save(namepdf); + doc.autoPrint(); + } + + if (download_image==true) { + saveAs(canvas.toDataURL(), 'file-name.png'); + } + }); }) + }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus, errorThrown); diff --git a/public/js/main.js b/public/js/main.js index 847382d..8032798 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -20,11 +20,36 @@ $(document).on('keyup', '.stick_text', function() { } }); +function saveAs(uri, filename) { + var link = document.createElement('a'); + if (typeof link.download === 'string') { + link.href = uri; + link.download = filename; + + //Firefox requires the link to be in the body + document.body.appendChild(link); + + //simulate click + link.click(); + + //remove the link when done + document.body.removeChild(link); + } else { + window.open(uri); + } +} + $(document).on('click', '#bc-btn', function() { var text = $('#_bdata').val(); var _from = $('#_from').val(); var _to = $('#_to').val(); var _cardid = $('#_cardid').val(); + + var atLeastOneIsChecked = $('input[name="chk[]"]:checked').length > 0; + // if (!atLeastOneIsChecked) { + // alert('Please specify download option: Image and/or PDF'); + // return false; + // } $.ajax({ type: 'post', @@ -45,20 +70,31 @@ $(document).on('click', '#bc-btn', function() { var opts = { width: 200, errorCorrectionLevel: 'H' - } + } + + var download_pdf = $('#Checkpdf').is(":checked"); + var download_image = $('#Checkimg').is(":checked"); QRCode.toCanvas(canvas, urlstring, opts, function (error) { if (error) console.error(error) console.log('Qr generated! for : '.urlstring); html2canvas(document.getElementById("pdfcontent"), { allowTaint: true }).then(function(canvas) { - let namepdf = "flo-greetings-"+new Date().getTime()+".pdf"; - var img = canvas.toDataURL("image/png"); - var doc = new jsPDF('p', 'mm', 'a3'); - doc.addImage(img, 'PNG', 1, 2); - doc.save(namepdf); - doc.autoPrint(); + if (download_pdf==true) { + let namepdf = "flo-greetings-"+new Date().getTime()+".pdf"; + var img = canvas.toDataURL("image/png"); + var doc = new jsPDF('p', 'mm', 'a3'); + doc.addImage(img, 'PNG', 1, 2); + doc.save(namepdf); + doc.autoPrint(); + } + + if (download_image==true) { + saveAs(canvas.toDataURL(), 'file-name.png'); + } + }); }) + }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus, errorThrown); diff --git a/views/partials/header.ejs b/views/partials/header.ejs index 7f85a85..73f9d3f 100644 --- a/views/partials/header.ejs +++ b/views/partials/header.ejs @@ -11,6 +11,7 @@ + <%=title%> diff --git a/views/write.ejs b/views/write.ejs index dd5f4f5..932e266 100644 --- a/views/write.ejs +++ b/views/write.ejs @@ -28,6 +28,16 @@ + +
+ + +
+ +
+ + +

@@ -39,10 +49,10 @@
Dear Alice
- Card image cap + Card image cap
-

Your special message will appear here.

+

Your special message will appear here.

From Bob

@@ -50,7 +60,7 @@

- Rabchi Mall logo + Ranchi Mall logo FLO logo

--- A Ranchi Mall FLO Blockchian Product ---