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}')

请注意，＃{buffer}必须是base64编码的String。然后在您的请求处理程序中，您发送这样的图像

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

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

Answer 2

首先，您需要设置视图引擎以使用jade：

let removeSuccessful: Bool = KeychainWrapper.removeObjectForKey("myKey")

最好有一个基本模板并为其添加块以允许嵌入内容。

<强>视图/ layout.jade

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

<强>视图/图像-upload.jade

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

最后你的router.post方法：

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('/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); }); }); });承诺解决后无需重新读取文件。

如何在玉石视图中显示最终上传的图像

2 个答案: