微信小程序上传图片到后台nodejs,后台根据前端传入的位置信息在图片上画矩形
时间: 2023-12-23 14:02:54 浏览: 104
实现这个功能,可以分为以下几个步骤:
1. 前端上传图片:使用微信小程序的wx.chooseImage方法选择一张图片,并使用wx.uploadFile方法上传到后台。上传时需要设置header,Content-Type为multipart/form-data,同时设置formData中的参数,如下:
```javascript
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths;
wx.uploadFile({
url: 'https://example.com/upload',
filePath: tempFilePaths[0],
name: 'file',
header: {
'Content-Type': 'multipart/form-data'
},
formData: {
'position': '100,100,200,200'
},
success: function(res){
console.log(res)
}
})
}
})
```
2. 后台接收图片:使用multer中间件解析上传的图片,然后使用Jimp库读取图片并进行后续操作,如下:
```javascript
const express = require('express');
const app = express();
const multer = require('multer');
const Jimp = require('jimp');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
});
const upload = multer({storage: storage});
app.post('/upload', upload.single('file'), function(req, res, next) {
const {x1, y1, x2, y2} = req.body.position.split(',');
const image = req.file.path;
Jimp.read(image, (err, img) => {
if (err) throw err;
img.crop(Number(x1), Number(y1), Number(x2) - Number(x1), Number(y2) - Number(y1))
.write(image, () => {
res.send('success');
});
});
});
app.listen(3000, function() {
console.log('server started');
});
```
3. 后台在图片上画矩形:使用Jimp库对图片进行裁剪,并在裁剪后的图片上画矩形,如下:
```javascript
const {x1, y1, x2, y2} = req.body.position.split(',');
const image = req.file.path;
Jimp.read(image, (err, img) => {
if (err) throw err;
img.crop(Number(x1), Number(y1), Number(x2) - Number(x1), Number(y2) - Number(y1))
.rectangle(0, 0, Number(x2) - Number(x1), Number(y2) - Number(y1), Jimp.AUTO, '#FF0000')
.write(image, () => {
res.send('success');
});
});
```
以上就是实现微信小程序上传图片到后台nodejs,并在图片上画矩形的步骤。
阅读全文