Question

我正在使用JQuery裁剪图像。

  <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>

对于上面的代码，我有x，y坐标，宽度和高度裁剪图像，在后端我使用Node.JS中的multer模块。在我不知道如何将x和y坐标传递给那个m .. 码。在我的主文件app.js中，我将模块声明为

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

在我使用的控制器中

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;
    }

以这种方式上传文件但不上传文件。

Answer 1

这应该做你想要的。 ~~我喜欢使用sharp进行图像处理。~~报废，看到你需要裁剪而不是调整大小！请使用gm。

（编辑： Lovell在评论中指出sharp可以使用 - “sharp支持区域提取，类似于裁剪功能 gm，通过其extract操作“。有关详细信息，请参阅他的评论。）

用于获取表单图片大小的HTML：

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

虽然这可以满足您的要求，但也要考虑用户输入错误，例如为特定图像指定过大的裁剪区域（例如，尝试从50像素的正方形图像裁剪200px的正方形区域 - 这是不可能的）。我会留给你的！

如何在ejs和Node.JS中裁剪和上传图像？

1 个答案: