Wie kann man Bilder in ejs und Node.JS zuschneiden und hochladen?

Question

I'm using JQuery to crop an image.

<link href="/public/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" /> 

     <!-- add scripts --> 
     <script src="http://code.jquery.com/jquery-1.9.0.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script> 
     <script src="/public/js/jquery.Jcrop.min.js"></script> 
     <script src="/public/js/script.js"></script> 

    <form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php" onsubmit="return checkForm()"> 
        <!-- hidden crop params --> 
        <input type="hidden" id="x1" name="x1" /> 
        <input type="hidden" id="y1" name="y1" /> 
        <input type="hidden" id="x2" name="x2" /> 
        <input type="hidden" id="y2" name="y2" /> 

        <h2>Step1: Please select image file</h2> 
        <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div> 

        <div class="error"></div> 

        <div class="step2"> 
         <h2>Step2: Please select a crop region</h2> 
         <img id="preview" /> 

         <div class="info"> 
          <label>File size</label> <input type="text" id="filesize" name="filesize" /> 
          <label>Type</label> <input type="text" id="filetype" name="filetype" /> 
          <label>Image dimension</label> <input type="text" id="filedim" name="filedim" /> 
          <label>W</label> <input type="text" id="w" name="w" /> 
          <label>H</label> <input type="text" id="h" name="h" /> 
         </div> 

         <input type="submit" value="Upload" onclick="return checkForm()"/> 
        </div> 

For the above code I have an x, y co-ordinations, width and height of crop image and in the backend I am using the multer module in Node.JS. In that I don't know how can I pass x and y coordinates to that multer code. In my main file app.js I declare the module like

var FormData = require('form-data'); 
var multer = require('multer'); 
var upload = multer({ dest: 'uploads/' }); 

und in der Steuerung verwendet i wie dieses

BASE.APP.post('/profile', BASE.upload.single('avatar'), function (req, res, next) { 
    // req.file is the `avatar` file 
    // req.body will hold the text fields, if there were any 

    //console.log(req.file); 

    BASE.FS.readFile(req.file.path, function read(err, data) { 
    if (err) { 
     throw err; 
    } 

In this way the file is uploaded but not the cropped one.

Answer 1

Dies tun sollten, was Sie es wollen. Ich verwende gerne sharp für die Bildbearbeitung. Schrott, sah, dass Sie zuschneiden mussten und nicht die Größe ändern! Verwenden Sie hierfür gm.

(EDIT: Lovell zeigte in den Kommentaren darauf hin, dass sharp verwendet werden kann - „sharp unterstützt Bereichsextraktion, ähnlich wie die Ernte-Funktion von gm über seinen extract Betrieb“ Siehe seinen Kommentar zu. mehr Info)

HTML für Form der Bildgröße bekommen:.

<form method="post" action="/"> 
    <input type="hidden" id="x1" name="x1" /> 
    <input type="hidden" id="y1" name="y1" /> 
    <input type="hidden" id="x2" name="x2" /> 
    <input type="hidden" id="y2" name="y2" /> 
    <input type="submit" value="Submit"> 
</form> 

JS:

var FormData = require('form-data'); 
var qs = require('querystring'); 
var multer = require('multer'); 
var gm = require('gm'); 

function (request, response) { 
    if (request.method == 'POST') { 
    let body = ''; 

    request.on('data', function (data) { 
     body += data; 

     // Too much POST data, kill the connection! 
     // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB 
     if (body.length > 1e6) request.connection.destroy(); 
    }); 

    request.on('end', function() { 
     // The POST variables are now within the `var post` 
     const post = qs.parse(body); 
     const x1 = post["x1"]; 
     const x2 = post["x2"]; 
     const y1 = post["y1"]; 
     const y2 = post["y2"]; 

     let upload = multer({ 
     dest: 'uploads/' 
     }); 

     BASE.APP.post('/profile', BASE.upload.single('avatar'), function(req, res, next) { 
     const imagePath = req.file.path; 
     const imageOutputPath = "/some/other/path"; 

     gm(imagePath) 
      .crop(x1, y1, x2, y2) 
      .write(imageOutputPath, function (err) { 
      if (!err) console.log('done'); 
      }); 
     }); 
    }); 
    } 
}); 

Während dies tut, was Sie gefragt haben, auch Benutzereingabefehler, wie zum Beispiel der Angabe zu groß eine Anbaufläche für ein bestimmtes Bild (zB prüfen, versuchen, eine 200px Quadrat Region zuzuschneiden aus ein quadratisches Bild mit 50 Pixeln - das ist nicht möglich. Das überlasse ich dir!