我如何顯示最終上傳的圖像與視圖玉

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承諾解決後重新讀取文件。