How to generate images server-side in Meteor and serve them via Iron Router?
Question
Like the title says, I just want to generate an image on the server and then serve it up in the browser via Iron Router.
Here's what I have so far:
server/methods.js :
Meteor.methods({
getImage(cardId, styleId) {
var canvas = new Canvas(500, 200);
var ctx = canvas.getContext('2d');
ctx.font = '26px "Comic Sans"';
ctx.fillText('Hello World', 50, 80);
var buffer = canvas.toBuffer();
buffer = canvas.toDataURL();
return buffer;
}
});
routes/routes.js :
Router.route('/i/:cardid/:styleid.png', function() {
var imgContent = Meteor.call('getImage', this.params.cardid, this.params.styleid);
//imgContent = `<html><body><img src="${imgContent}"></body></html>`;
this.response.writeHeader('200', {
'Content-Type': 'image/png',
'Content-Length': imgContent.length
});
this.response.write(imgContent);
this.response.end();
}, {where: 'server'});
If I uncomment the line in routes.js and comment out the image/png header, I can get the image to display inside of an HTML image tag, however this isn't want I want as I just want to serve up the actual image, no HTML.
Any help would be greatly appreciated. Thanks!
EDIT I've also tried returning this:
var buffer = canvas.toBuffer();
//buffer = canvas.toDataURL();
buffer = new Buffer(buffer, 'binary').toString('base64');
With no success.
EDIT 2 Basically I'm trying to do this: NodeJS: serve png generated by node-canvas but with just Meteor, Canvas, and Iron Router.
3 answers
solution1
0 2017-01-16 23:48:49
I thought about this a bit more. You could simply do the following in onAfterAction()
document.type="img";
document.location=url;
However you will lose the router after you do that.
You will still see html in the resulting page because if you open a url to an image in a browser it adds its own html markup around it automatically. To prove this just right-click on an image here and select "open image in new tab"
solution2
0 2017-01-17 14:40:48
You could use Picker for server side routing as it implements Node's ServerResponse module [ https://nodejs.org/api/http.html#http_class_http_serverresponse][1] [ https://github.com/meteorhacks/picker/][1]
Picker.route('/i/:cardid/:styleid.png', function(params, req, res, next) {
var imgContent = Meteor.call('getImage', params.cardid, params.styleid);
res.writeHead('200', {
'Content-Type': 'image/png',
'Content-Length': imgContent.length
});
res.end(imgContent);
});
solution3
0 ACCPTED 2017-01-18 21:43:14
I was able to get it working by doing the following:
server/methods.js :
Meteor.methods({
getImage(cardId, styleId) {
var canvas = new Canvas(500, 200);
var ctx = canvas.getContext('2d');
ctx.font = '26px "Comic Sans"';
ctx.fillText('Hello World', 50, 80);
return canvas.toBuffer();
}
});
routes/routes.js
Router.route('/i/:cardid/:styleid.png', function() {
var imgContent = Meteor.call('getImage', this.params.cardid, this.params.styleid);
imgContent = new Buffer(imgContent, 'binary');
this.response.writeHeader('200', {
'Content-Type': 'image/png',
'Content-Length': imgContent.length
});
this.response.write(imgContent);
this.response.end();
}, {where: 'server'});
Basically just needed to output the right kind of data!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.