Image downloading option added

This commit is contained in:
Abhishek Sinha 2018-08-02 19:23:08 +05:30
parent a71d5a850f
commit 31f80ee028
7 changed files with 340 additions and 18 deletions

203
package-lock.json generated
View File

@ -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"
}
}
}
}

View File

@ -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"
}
}

View File

@ -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;
}

View File

@ -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);

View File

@ -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);

View File

@ -11,6 +11,7 @@
<!-- Custom styles for this template -->
<link href="/css/carousel.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Arapey:400,400i|Caveat|Dancing+Script|Great+Vibes|Lobster|Ranga" rel="stylesheet"> -->
<title><%=title%></title>
</head>

View File

@ -28,6 +28,16 @@
<textarea id="_bdata" class="form-control stick_text" placeholder="Your message here"name="_bdata"></textarea>
<input type="hidden" id="_cardid" name="_cardid" value="<%=data.card_id%>" >
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="chk" id="Checkpdf">
<label class="custom-control-label" for="Checkpdf">Download PDF</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="chk" id="Checkimg">
<label class="custom-control-label" for="Checkimg">Download Image</label>
</div>
<br>
<button type="submit" class="btn btn-primary" id="bc-btn">Submit</button>
</div>
@ -39,10 +49,10 @@
<h5 class="card-title">Dear <span id="span_to">Alice</span></h5>
</div>
<div class="text-center">
<img src="/images/<%=data.card_id%>.jpg" alt="Card image cap">
<img src="/images/<%=data.card_id%>.jpg" alt="Card image cap" id="pdf-img">
</div>
<div class="card-body">
<p class="card-text"><span id="span_user_msg"><i>Your special message will appear here.</i></span></p>
<p class="card-text"><span id="span_user_msg" class="span_user_msg"><i>Your special message will appear here.</i></span></p>
<p class="card-text"><small class="text-muted">From <span id="span_from">Bob</span></small></p>
<p class="card-text">
@ -50,7 +60,7 @@
</p>
<p class="card-text">
<img src="/images/rm.png" alt="Rabchi Mall logo" width="50" height="50">
<img src="/images/rm.png" alt="Ranchi Mall logo" width="50" height="50">
<img src="/images/FLO_teal.png" alt="FLO logo" width="50" height="50">
<p><small class="text-muted">--- A Ranchi Mall FLO Blockchian Product ---</small></p>
</p>