[英]How to crop and upload image in ejs and Node.JS?
我正在使用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坐標傳遞給那個multer代碼。 在我的主文件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;
}
以這種方式上傳文件但不上傳文件。
這應該做你想要的。 我喜歡使用sharp進行圖像處理。 報廢,看到你需要裁剪,而不是調整大小! 為此使用gm 。
( 編輯:洛弗爾在評論中指出, sharp
可以使用 - “ sharp
支持區域提取,類似於作物特征,通過其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');
});
});
});
}
});
雖然這可以滿足您的要求,但也可以考慮用戶輸入錯誤,例如為特定圖像指定過大的裁剪區域(例如,嘗試從50px正方形圖像裁剪200px正方形區域 - 這是不可能的)。 我會留給你的!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.