我如何显示最终上传的图像与视图玉

Question

之前我发布我的问题，你必须现在，我是新的使用node.js.

因此，我使用express，fs和easyimage来构建图像上传器，它的工作正常。我想使用jade在客户端（视图）中显示最终调整大小的动态图像。

这是我的路线images.js文件：

var express = require('express'); 
var router = express.Router(); 

/* GET users listing. */ 
router.get('/', function(req, res) { 
res.send('home'); 
}); 

router.get('/upload', function(req, res) { 
res.sendfile("./public/html/images-upload.html"); 
}); 

router.post('/upload', function(req, res) { 

    var multiparty = require("multiparty"); 
    var form = new multiparty.Form(); 

form.parse(req, function(err,fields,files){ 

    var img = files.images[0]; 
    var fs = require("fs"); 
    var easyimg = require("easyimage"); 


fs.readFile(img.path, function(err, data){ 

    var path = "./public/images/"+img.originalFilename; 


    easyimg.rescrop({ 

    src:"public/images/"+img.originalFilename,  dst:"public/uploads/"+img.originalFilename, 
    width:150, height:150, 
    cropwidth:128, cropheight:128, 
    x:0, y:0 
    }).then(

    function(image) { 

     console.log('Resized and cropped: ' + image.width + 'image.height); 
      }, 
    function (err) { 

    console.log(err); 

    }); 


    fs.writeFile(path, data, function(error) { 

    if(error) console.log(error); 
     //controller 

    var jade = require('jade'); 

     res.render('home', {templateRender: jade.renderFile}) 

     //template 

    }); 


    }); 

    }); 

    }); 

     module.exports = router; 

Answer 1

在你index.jade文件，你需要这样的事：

extends layout 

block content 
    h1= title 
    p This page will display a resized image. 

    img(src='data:image/jpg;base64,#{buffer}') 

会注意到＃{}缓冲区必须是一个base64编码字符串。然后在你的请求处理程序，您发送的图像这样

res.render('index', {title: 'Page Title', buffer: buffer2.toString('base64')}) 

您可以将调整后的图像转换为节点缓冲区对象。这就是上面代码中'buffer2'的含义。我查看了easyimage文档，看起来成功调整函数大小可能会返回一个缓冲区，然后可以将其转换为base64编码的字符串。如果您没有从easyimage获取缓冲区对象，则可以尝试其他实用程序。例如，也可以尝试使用也使用ImageMagick的'gm'实用程序。我学会了从这一资源经过base64编码对象玉的方法：https://blog.tompawlak.org/data-uri-scheme-image-nodejs-jade

Answer 2

首先你需要设置你的意见引擎使用玉：

// view engine setup. 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 

它有一个基本模板一个好主意，添加块以允许嵌入内容。

的意见/ layout.jade

doctype html 
html 
    head 
    title Super uploader APP 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    body 
    block content 

的意见/图像 - upload.jade

extends layout 

block content 
    form(method='post', action='/upload', enctype='multipart/form-data') 
    input(type='file', name='images', accept='image/*', multiple) 
    button(type='submit') Upload 

    if img 
    img(src='#{img.URL}', alt='None to show :(') 

最后你router.post方法：

router.post('/upload', function(req, res) { 
    var multiparty = require("multiparty"); 
    var form = new multiparty.Form(); 

    form.parse(req, function(err, fields, filesDict){ 
    var img = filesDict.images[0]; 
    var fs = require("fs"); 
    var easyimg = require("easyimage"); 

    easyimg.rescrop({ 
     src: img.path, // It's a temporal image, somewhere in /tmp, console.log('Image temp file', img.path); 
     dst: "public/uploads/" + img.originalFilename, 
     width: 150, height:150, 
     cropwidth: 128, cropheight: 128, 
     x:0, y:0 
    }).then(function(image) { 
     // see this: 
     // http://stackoverflow.com/questions/10729276/how-can-i-get-the-full-object-in-node-js-console-log-rather-than-object 
     var util = require('util'); 
     console.log('Resized and cropped: ' + util.inspect(image, {showHidden: false, depth: null})); 
     // drop leading "public" word from path. 
     var url = image.path.substring(image.path.indexOf('/'), image.path.length); 

     // Render images-upload.jade template with image URL passed as context. 
     res.render('images-upload', {img: {URL: url}}); // will infer and search the images-upload.jade template 
     }, 
     function (err) { 
     console.log('Err', err); 
     }); 
    }); 

}); 

由于你可以看到，没有必要rescrop承诺解决后重新读取文件。