2017-01-16 9 views
0

Как и в названии, я просто хочу сгенерировать изображение на сервере, а затем выполнить его в браузере через Iron Router.Как создать образы на стороне сервера в Meteor и обслуживать их через Iron Router?

Вот что я до сих пор:

сервер/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.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'}); 

Если я раскомментировать строка в routes.js и комментарий image/png, я могу получить изображение для отображения внутри тега изображения HTML, однако это не хочу, я хочу, поскольку я просто хочу показывать фактическое изображение, а не HTML.

Любая помощь была бы принята с благодарностью. Благодаря!

EDIT Я также попытался это возвращение:

var buffer = canvas.toBuffer(); 
//buffer = canvas.toDataURL(); 

buffer = new Buffer(buffer, 'binary').toString('base64'); 

без успеха.

File contents without image/png header

File contents with image/png header

EDIT 2 В основном я пытаюсь сделать это: NodeJS: serve png generated by node-canvas но только с Метеор, Canvas и Железный маршрутизатор.

+0

Я не верю, что это возможно в маршрутизаторе. Маршрутизатор хочет отобразить html-шаблон. Метеор будет автоматически добавлять ' ...' вокруг шаблона. –

ответ

0

я был в состоянии получить работу, выполнив следующие действия:

сервер/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(); 
    } 
}); 

маршруты/маршруты.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'}); 

В основном просто нужно выводить правильный вид данных!

0

Я подумал об этом немного больше. Вы можете просто сделать следующее в onAfterAction()

document.type="img"; 
document.location=url; 

Однако вы потеряете маршрутизатор после этого делать.

Вы все равно увидите html на полученной странице, потому что, если вы открываете URL-адрес изображения в браузере, он автоматически добавляет свою собственную разметку html. Чтобы доказать это просто щелкнуть правой кнопкой мыши на изображение здесь и выберите «Открыть изображение в новой вкладке»

+0

Я не думаю, что ваш ответ будет делать то, что я хочу, чтобы он делал все еще, поскольку я должен предоставить URL-адрес файлу, но с момента создания файла он не существует, и я хочу обслуживать буфер изображения в браузер. Я уверен, что это возможно, поскольку люди сделали то же самое, чтобы обслуживать содержимое файла следующим образом: http://stackoverflow.com/questions/21565991/how-to-serve-a-file-using-iron-router- или-meteor- –

0

Вы можете использовать Picker для боковой маршрутизации сервера, как он реализует ServerResponse модуль Node в [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); 
    }); 
+0

Я чувствую, что это возможно в Iron Router. Я просто делаю что-то не так, как люди сделали то же самое, чтобы обслуживать содержимое файла следующим образом: http://stackoverflow.com/questions/21565991/how- to-serve-a-file-using-iron-router-or-meteor-self –

+0

Итак, вы хотите разоблачить ссылку «data:»? Это выполнимо. –

+0

Я не совсем уверен, но это звучит правильно. В основном я хотел бы генерировать и показывать изображение, когда пользователь посещает URL-адрес. Поэтому, если бы я сделал что-то вроде '[img src =" http://mywebsite.com/i/323/1.png "]'. Изображение будет сгенерировано на основе пути. –

 Смежные вопросы

  • Нет связанных вопросов^_^