際際滷

際際滷Share a Scribd company logo
??? ? ?
HTML5 ???
PDF ?? ? ???
? ?? ???? - PDF Toolkit, wkhtmltopdf!
? ?? - PDFKit
?? ???? - wkhtmltopdf
? wkhtmltopdf - WebKit ??? ??? ???? ?
HTML? PDF ? ??.!
? wkthmltopdf http://mindpreview.com
test.pdf
Ex12-1
var spawn = require('child_process').spawn;!
// command line arguments!
var url = process.argv[2]; !
var output = process.argv[3];!
if (url && output) {!
! var wkhtmltopdf = spawn('wkhtmltopdf', [url, output]);!
! wkhtmltopdf.stdout.setEncoding('utf8'); !
! wkhtmltopdf.stdout.on('data', function (data) {!
! ! console.log(data); !
! });!
! wkhtmltopdf.stderr.on('data', function (data) {!
! ! console.log('stderr: ' + data); !
! });!
! wkhtmltopdf.on('exit', function (code) {!
! ! console.log('child process exited with code ' + code); !
! });!
} else {!
! console.log('You need to provide a URL and output file name'); !
}
PDFToolkit??PDF??
Dump Number of Pages
var spawn = require('child_process').spawn;!
var pdftk = spawn('pdftk', [__dirname + '/test.pdf', 'dump_data']);!
!
pdftk.stdout.on('data', function (data) {!
! // convert results to an object!
! var array = data.toString().split('n'); !
! var obj = {};!
! array.forEach(function(line) { !
! ! var tmp = line.split(':'); !
! ! obj[tmp[0]] = tmp[1];!
! });!
! // print out number of pages!
! console.log(obj['NumberOfPages']); !
});!
!
pdftk.stderr.on('data', function (data) {!
! console.log('stderr: ' + data); !
});!
!
pdftk.on('exit', function (code) {!
! console.log('child process exited with code ' + code); !
});
PDF ??? ? ?
??? ?? ?? ??
? PDF ???!
? PDF ??!
? PDF ??? ??!
? email ??!
? PDF ??? ?? ? ?? ???
??? ?
<form id="upload" method="POST" action="http://localhost:8124"
enctype="multipart/form-data">!
<p><label for="username">User Name:</label>!
<input id="username" name="username" type="text" size="20" required /></p>!
!
<p><label for="email">Email:</label>!
<input id="email" name="email" type="text" size="20" required /></p>!
!
<p><label for="pdffile">PDF File:</label>!
<input type="file" name="pdffile" id="pdffile" required /></p>!
<p>!
<p>!
!
<input type="submit" name="submit" id="submit" value="Submit"/> !
</p>!
</form>
??? ??
var connect = require('connect');!
var pdfprocess = require('./pdfprocess');!
// if POST!
// upload file, kick off PDF burst, respond with ack !
function upload(req, res, next){!
! if ('POST' != req.method) return next();!
!
! res.setHeader('Content-Type', 'text/html');!
! if (req.files.pdffile && req.files.pdffile.type === 'application/pdf') {!
! ! res.write('<p>Thanks ' + req.body.username +!
! ! ! ! ' for uploading ' + req.files.pdffile.name + '</p>');!
! ! res.end("<p>You'll receive an email with file links when processed.</p>");!
! ! // post upload processing !
! ! pdfprocess.processFile(req.body.username, req.body.email, !
! ! ! req.files.pdffile.path, req.files.pdffile.name);!
! }else {!
! ! res.end('The file you uploaded was not a PDF');!
! }!
}
PDF ??
//burst pdf!
var pdftk = spawn('pdftk', [newfile, 'burst', 'output', dir + '/page_%02d.pdf' ]);!
pdftk.on('exit', function (code) { !
! console.log('child process ended with ' + code); !
! if (code != 0)!
! ! return;!
! console.log('sending email'); // send email!
! ! ! ! ! !
! var server = emailjs.server.connect(!
! ! ! { user : 'gmail.account.name', !
! ! ! password : 'gmail.account.passwod', !
! ! ! host : 'smtp.gmail.com', port : 587, tls : true }!
! );!
! var headers = {!
! ! text : 'You can find your split PDF at ' + url, from : 'youremail',!
! ! to : email,!
! ! subject: 'split pdf'!
! };!
! ! ! ! !
! var message = emailjs.message.create(headers); !
! message.attach(!
! ! {data:"<p>You can find your split PDF at " +!
! ! "<a href='" + url + "'>" + url + "</a></p>", alternative: true}!
! );!
! server.send(message, function(err, message) {!
! ! console.log(err || message); !
! });!
! ! ! ! ! !
! pdftk.kill(); !
});
PDFKit ?? PDF ??
? PDF ?? ??, ??? ??, ?
???? ??? ??, ??? ??´!
? npm install pdfkit
PDFKit
PDFDocument = require ('pdfkit')!
var fs = require('fs');!
!
var doc = new PDFDocument();!
!
doc.pipe(fs.createWriteStream('output.pdf'));!
!
doc.font('/Library/Fonts/Arial.ttf')!
! .fontSize(25)!
! .text('Some text with an embedded font!', 100, 100);!
!
doc.addPage()!
! .fontSize(25)!
! .text('Here is some vector graphics...', 100, 100);!
!
doc.save()!
! .moveTo(100, 150)!
! .lineTo(100, 250)!
! .lineTo(200, 250)!
! .fill("#FF3300");!
!
doc.scale(0.6)!
! .translate(470, -380)!
! .path('M 250,75 L 323,301 131,161 369,161 171,301 z')!
! .fill('red', 'even-odd')!
! .restore();!
!
doc.addPage()!
! .fillColor("blue")!
! .text('Here is a link!', 100, 100) !
! .underline(100, 100, 160, 27, {color: "#0000FF"}) !
! .link(100, 100, 160, 27, 'http://google.com/');!
!
doc.end();
ImageMagick
? ImageMagick ? ??? ??? ??.!
? ???? ???? ?? ??, ?? ??? ??, ?
????? ??, ?? ?? ´!
? ???? ?? ??, ??? ?? ?? ?? ??.!
? npm install imagemagick
ImageMagick ??
? convert - ???, ?? ??, ?? ??? ?? ??.!
? mogrify - ???? ???? ?? ???? ??.!
? montage - ?? ?????? ?? ???? ??.!
? stream - ? ??? ???? ???? ????.
$ convert NatGeo01.jpg -resize `150¨ photo.jpg.png
var spawn = require('child_process').spawn;!
// get photo!
var photo = process.argv[2];!
// conversion array !
var opts = [!
! photo,!
! '-resize',!
! '150',!
! photo + ".png"];!
! !
// convert!
var im = spawn('convert', opts);!
!
im.stderr.on('data', function (data) { !
! console.log('stderr: ' + data);!
});!
!
im.on('exit', function (code) { !
! if (code === 0)!
! ! console.log('photo has been converted and is accessible at ' +
photo + '.png');!
});
Polaroid effect
? convert NatGeo03.jpg ?
-bordercolor white -border 6 ?
-bordercolor grey60 -border 1 ?
-background none -rotate 6 ?
-background black ( +clone -shadow 60x4+4+4 )
+swap  -background none -?atten ?
polaroid.png
Node ch12
var spawn = require('child_process').spawn;!
// get photo!
var photo = process.argv[2];!
// conversion array!
var opts = [!
photo,!
"-bordercolor", "snow",!
"-border", "6",!
"-background","grey60",!
"-background", "none",!
"-rotate", "6",!
"-background", "black",!
"(", "+clone", "-shadow", "60x4+4+4", ")", !
"+swap",!
"-background", "none", !
"-flatten",!
photo + ".png"];!
!
var im = spawn('convert', opts);
??? ?? ?? ??
? ?? ???? ???, ?? ??? ? ??,!
? ?? ?? ??? ???? ??,!
? ??? ??(???, ???)? ?? ?? ??.
HTML 5 ??? (????)
? ?? ??? Accept-Ranges: bytes ??.!
? ?? ??? ?? ?? ??/??.?
bytes=startnum-endnum!
? ?? ??/???.!
? ?? ??? Content-Range, Content-Length ??.!
? ?? ?? ?? ??? 206 ?? 416 ?? ??.!
? ??? ?? ??? ??.
Mini server
function processRange(res,ranges,len) { !
! var start, end;!
! // extract start and stop range!
! var rangearray = ranges.split('-');!
! start = parseInt(rangearray[0].substr(6)); !
! end = parseInt(rangearray[1]);!
! !
! if (isNaN(start)) !
! ! start = 0; !
! if (isNaN(end)) !
! ! end = len ? 1;!
! // start beyond end of file length !
! if (start > len - 1) {!
! ! res.setHeader('Content-Range', 'bytes */' + len); !
! ! res.writeHead(416);!
! ! res.end();!
! }!
! // end can't be beyond file length if (end > len - 1)!
! end = len - 1;!
! return {start:start, end:end}; !
}
http.createServer(function (req, res) {!
! pathname = __dirname + '/public' + req.url;!
! fs.stat(pathname, function(err, stats) { !
! ! if (stats.isFile()) {!
! ! ! var opt={};!
! ! ! res.statusCode = 200;!
! ! ! var len = stats.size;!
! ! ! // we have a Range request !
! ! ! if (req.headers.range) {!
! ! ! ! opt = processRange(res,req.headers.range,len);!
! ! ! ! // adjust length!
! ! ! ! len = opt.end - opt.start + 1;!
! ! ! ! // change status code to partial!
! ! ! ! res.statusCode = 206;!
! ! ! ! // set header!
! ! ! ! var ctstr = 'bytes ' + opt.start + '-' +!
! ! ! ! opt.end + '/' + stats.size;!
! ! ! ! res.setHeader('Content-Range', ctstr); !
! ! ! }!
!
! ! ! console.log('len ' + len); !
! ! ! res.setHeader('Content-Length', len);!
!
! ! ! // create and pipe readable stream!
! ! ! var file = fs.createReadStream(pathname,opt); !
! ! ! file.on("open", function() {!
! ! ! ! file.pipe(res); !
! ! ! });!
! ! } !
! });!
}).listen(8124);
Canvas ??? ?? ? ????
? canvas ??? ????? ? ????? ???? ??
???? ???? ??.!
? npm install canvas!
? Canvas ??? ????? ??/??? ?, ?
??? jpeg/png ??? ??? ? ??.
Canvas Drawing
var Canvas = require('canvas'); !
var fs = require('fs');!
// new canvas and context!
var canvas = new Canvas(350,350); !
var ctx = canvas.getContext('2d');!
// create filled rectangle with shadow !
// save context for later restore !
ctx.save();!
ctx.shadowOffsetX = 10; !
ctx.shadowOffsetY = 10;!
ctx.shadowBlur = 5; !
ctx.shadowColor='rgba(0,0,0,0.4)';!
!
ctx.fillStyle = '#fff';!
ctx.fillRect(30,30,300,300);
ctx.translate(125,125);!
for (i=1;i<6;i++){!
! ctx.save();!
! ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; !
! for (j=0;j<i*6;j++){!
! ! ctx.rotate(Math.PI*2/(i*6));!
! ! ctx.beginPath(); !
! ! ctx.arc(0,i*12.5,5,0,Math.PI*2,true);!
! ! ctx.fill();!
! }!
! ctx.restore();!
}!
// stream to PNG file!
var out = fs.createWriteStream(__dirname + '/shadow.png'); !
var stream = canvas.createPNGStream();!
stream.on('data', function(chunk){ !
! out.write(chunk);!
});!
stream.on('end', function(){ !
! console.log('saved png');!
});

More Related Content

More from Kyungryul KIM (20)

Node ch12

  • 2. PDF ?? ? ??? ? ?? ???? - PDF Toolkit, wkhtmltopdf! ? ?? - PDFKit
  • 3. ?? ???? - wkhtmltopdf ? wkhtmltopdf - WebKit ??? ??? ???? ? HTML? PDF ? ??.! ? wkthmltopdf http://mindpreview.com test.pdf
  • 4. Ex12-1 var spawn = require('child_process').spawn;! // command line arguments! var url = process.argv[2]; ! var output = process.argv[3];! if (url && output) {! ! var wkhtmltopdf = spawn('wkhtmltopdf', [url, output]);! ! wkhtmltopdf.stdout.setEncoding('utf8'); ! ! wkhtmltopdf.stdout.on('data', function (data) {! ! ! console.log(data); ! ! });! ! wkhtmltopdf.stderr.on('data', function (data) {! ! ! console.log('stderr: ' + data); ! ! });! ! wkhtmltopdf.on('exit', function (code) {! ! ! console.log('child process exited with code ' + code); ! ! });! } else {! ! console.log('You need to provide a URL and output file name'); ! }
  • 6. Dump Number of Pages var spawn = require('child_process').spawn;! var pdftk = spawn('pdftk', [__dirname + '/test.pdf', 'dump_data']);! ! pdftk.stdout.on('data', function (data) {! ! // convert results to an object! ! var array = data.toString().split('n'); ! ! var obj = {};! ! array.forEach(function(line) { ! ! ! var tmp = line.split(':'); ! ! ! obj[tmp[0]] = tmp[1];! ! });! ! // print out number of pages! ! console.log(obj['NumberOfPages']); ! });! ! pdftk.stderr.on('data', function (data) {! ! console.log('stderr: ' + data); ! });! ! pdftk.on('exit', function (code) {! ! console.log('child process exited with code ' + code); ! });
  • 7. PDF ??? ? ? ??? ?? ?? ?? ? PDF ???! ? PDF ??! ? PDF ??? ??! ? email ??! ? PDF ??? ?? ? ?? ???
  • 8. ??? ? <form id="upload" method="POST" action="http://localhost:8124" enctype="multipart/form-data">! <p><label for="username">User Name:</label>! <input id="username" name="username" type="text" size="20" required /></p>! ! <p><label for="email">Email:</label>! <input id="email" name="email" type="text" size="20" required /></p>! ! <p><label for="pdffile">PDF File:</label>! <input type="file" name="pdffile" id="pdffile" required /></p>! <p>! <p>! ! <input type="submit" name="submit" id="submit" value="Submit"/> ! </p>! </form>
  • 9. ??? ?? var connect = require('connect');! var pdfprocess = require('./pdfprocess');! // if POST! // upload file, kick off PDF burst, respond with ack ! function upload(req, res, next){! ! if ('POST' != req.method) return next();! ! ! res.setHeader('Content-Type', 'text/html');! ! if (req.files.pdffile && req.files.pdffile.type === 'application/pdf') {! ! ! res.write('<p>Thanks ' + req.body.username +! ! ! ! ! ' for uploading ' + req.files.pdffile.name + '</p>');! ! ! res.end("<p>You'll receive an email with file links when processed.</p>");! ! ! // post upload processing ! ! ! pdfprocess.processFile(req.body.username, req.body.email, ! ! ! ! req.files.pdffile.path, req.files.pdffile.name);! ! }else {! ! ! res.end('The file you uploaded was not a PDF');! ! }! }
  • 10. PDF ?? //burst pdf! var pdftk = spawn('pdftk', [newfile, 'burst', 'output', dir + '/page_%02d.pdf' ]);! pdftk.on('exit', function (code) { ! ! console.log('child process ended with ' + code); ! ! if (code != 0)! ! ! return;! ! console.log('sending email'); // send email! ! ! ! ! ! ! ! var server = emailjs.server.connect(! ! ! ! { user : 'gmail.account.name', ! ! ! ! password : 'gmail.account.passwod', ! ! ! ! host : 'smtp.gmail.com', port : 587, tls : true }! ! );! ! var headers = {! ! ! text : 'You can find your split PDF at ' + url, from : 'youremail',! ! ! to : email,! ! ! subject: 'split pdf'! ! };! ! ! ! ! ! ! var message = emailjs.message.create(headers); ! ! message.attach(! ! ! {data:"<p>You can find your split PDF at " +! ! ! "<a href='" + url + "'>" + url + "</a></p>", alternative: true}! ! );! ! server.send(message, function(err, message) {! ! ! console.log(err || message); ! ! });! ! ! ! ! ! ! ! pdftk.kill(); ! });
  • 11. PDFKit ?? PDF ?? ? PDF ?? ??, ??? ??, ? ???? ??? ??, ??? ??´! ? npm install pdfkit
  • 12. PDFKit PDFDocument = require ('pdfkit')! var fs = require('fs');! ! var doc = new PDFDocument();! ! doc.pipe(fs.createWriteStream('output.pdf'));! ! doc.font('/Library/Fonts/Arial.ttf')! ! .fontSize(25)! ! .text('Some text with an embedded font!', 100, 100);! ! doc.addPage()! ! .fontSize(25)! ! .text('Here is some vector graphics...', 100, 100);! ! doc.save()! ! .moveTo(100, 150)! ! .lineTo(100, 250)! ! .lineTo(200, 250)! ! .fill("#FF3300");! ! doc.scale(0.6)! ! .translate(470, -380)! ! .path('M 250,75 L 323,301 131,161 369,161 171,301 z')! ! .fill('red', 'even-odd')! ! .restore();! ! doc.addPage()! ! .fillColor("blue")! ! .text('Here is a link!', 100, 100) ! ! .underline(100, 100, 160, 27, {color: "#0000FF"}) ! ! .link(100, 100, 160, 27, 'http://google.com/');! ! doc.end();
  • 13. ImageMagick ? ImageMagick ? ??? ??? ??.! ? ???? ???? ?? ??, ?? ??? ??, ? ????? ??, ?? ?? ´! ? ???? ?? ??, ??? ?? ?? ?? ??.! ? npm install imagemagick
  • 14. ImageMagick ?? ? convert - ???, ?? ??, ?? ??? ?? ??.! ? mogrify - ???? ???? ?? ???? ??.! ? montage - ?? ?????? ?? ???? ??.! ? stream - ? ??? ???? ???? ????.
  • 15. $ convert NatGeo01.jpg -resize `150¨ photo.jpg.png
  • 16. var spawn = require('child_process').spawn;! // get photo! var photo = process.argv[2];! // conversion array ! var opts = [! ! photo,! ! '-resize',! ! '150',! ! photo + ".png"];! ! ! // convert! var im = spawn('convert', opts);! ! im.stderr.on('data', function (data) { ! ! console.log('stderr: ' + data);! });! ! im.on('exit', function (code) { ! ! if (code === 0)! ! ! console.log('photo has been converted and is accessible at ' + photo + '.png');! });
  • 17. Polaroid effect ? convert NatGeo03.jpg ? -bordercolor white -border 6 ? -bordercolor grey60 -border 1 ? -background none -rotate 6 ? -background black ( +clone -shadow 60x4+4+4 ) +swap -background none -?atten ? polaroid.png
  • 19. var spawn = require('child_process').spawn;! // get photo! var photo = process.argv[2];! // conversion array! var opts = [! photo,! "-bordercolor", "snow",! "-border", "6",! "-background","grey60",! "-background", "none",! "-rotate", "6",! "-background", "black",! "(", "+clone", "-shadow", "60x4+4+4", ")", ! "+swap",! "-background", "none", ! "-flatten",! photo + ".png"];! ! var im = spawn('convert', opts);
  • 20. ??? ?? ?? ?? ? ?? ???? ???, ?? ??? ? ??,! ? ?? ?? ??? ???? ??,! ? ??? ??(???, ???)? ?? ?? ??.
  • 21. HTML 5 ??? (????) ? ?? ??? Accept-Ranges: bytes ??.! ? ?? ??? ?? ?? ??/??.? bytes=startnum-endnum! ? ?? ??/???.! ? ?? ??? Content-Range, Content-Length ??.! ? ?? ?? ?? ??? 206 ?? 416 ?? ??.! ? ??? ?? ??? ??.
  • 22. Mini server function processRange(res,ranges,len) { ! ! var start, end;! ! // extract start and stop range! ! var rangearray = ranges.split('-');! ! start = parseInt(rangearray[0].substr(6)); ! ! end = parseInt(rangearray[1]);! ! ! ! if (isNaN(start)) ! ! ! start = 0; ! ! if (isNaN(end)) ! ! ! end = len ? 1;! ! // start beyond end of file length ! ! if (start > len - 1) {! ! ! res.setHeader('Content-Range', 'bytes */' + len); ! ! ! res.writeHead(416);! ! ! res.end();! ! }! ! // end can't be beyond file length if (end > len - 1)! ! end = len - 1;! ! return {start:start, end:end}; ! }
  • 23. http.createServer(function (req, res) {! ! pathname = __dirname + '/public' + req.url;! ! fs.stat(pathname, function(err, stats) { ! ! ! if (stats.isFile()) {! ! ! ! var opt={};! ! ! ! res.statusCode = 200;! ! ! ! var len = stats.size;! ! ! ! // we have a Range request ! ! ! ! if (req.headers.range) {! ! ! ! ! opt = processRange(res,req.headers.range,len);! ! ! ! ! // adjust length! ! ! ! ! len = opt.end - opt.start + 1;! ! ! ! ! // change status code to partial! ! ! ! ! res.statusCode = 206;! ! ! ! ! // set header! ! ! ! ! var ctstr = 'bytes ' + opt.start + '-' +! ! ! ! ! opt.end + '/' + stats.size;! ! ! ! ! res.setHeader('Content-Range', ctstr); ! ! ! ! }! ! ! ! ! console.log('len ' + len); ! ! ! ! res.setHeader('Content-Length', len);! ! ! ! ! // create and pipe readable stream! ! ! ! var file = fs.createReadStream(pathname,opt); ! ! ! ! file.on("open", function() {! ! ! ! ! file.pipe(res); ! ! ! ! });! ! ! } ! ! });! }).listen(8124);
  • 24. Canvas ??? ?? ? ???? ? canvas ??? ????? ? ????? ???? ?? ???? ???? ??.! ? npm install canvas! ? Canvas ??? ????? ??/??? ?, ? ??? jpeg/png ??? ??? ? ??.
  • 25. Canvas Drawing var Canvas = require('canvas'); ! var fs = require('fs');! // new canvas and context! var canvas = new Canvas(350,350); ! var ctx = canvas.getContext('2d');! // create filled rectangle with shadow ! // save context for later restore ! ctx.save();! ctx.shadowOffsetX = 10; ! ctx.shadowOffsetY = 10;! ctx.shadowBlur = 5; ! ctx.shadowColor='rgba(0,0,0,0.4)';! ! ctx.fillStyle = '#fff';! ctx.fillRect(30,30,300,300);
  • 26. ctx.translate(125,125);! for (i=1;i<6;i++){! ! ctx.save();! ! ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)'; ! ! for (j=0;j<i*6;j++){! ! ! ctx.rotate(Math.PI*2/(i*6));! ! ! ctx.beginPath(); ! ! ! ctx.arc(0,i*12.5,5,0,Math.PI*2,true);! ! ! ctx.fill();! ! }! ! ctx.restore();! }! // stream to PNG file! var out = fs.createWriteStream(__dirname + '/shadow.png'); ! var stream = canvas.createPNGStream();! stream.on('data', function(chunk){ ! ! out.write(chunk);! });! stream.on('end', function(){ ! ! console.log('saved png');! });