将图片维度从JavaScript发送到后端(Express)可以通过以下步骤完成:
<input type="file">
元素或者通过JavaScript创建一个文件选择对话框。获取到文件后,可以使用FileReader
对象读取文件内容。HTMLCanvasElement
创建一个画布,并将读取到的图片绘制到画布上。然后可以使用canvas
元素的toDataURL
方法将画布内容转换为Base64编码的图片数据URL。body-parser
中间件解析请求体。sharp
)解码Base64编码的图片数据URL,并获取图片的维度信息。可以使用sharp
库的metadata
方法获取图片的宽度和高度。以下是一个示例代码:
前端(JavaScript)代码:
// 获取用户选择的图片文件
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
// 读取文件内容
const reader = new FileReader();
reader.onload = function(event) {
const imageDataURL = event.target.result;
// 创建画布并绘制图片
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);
// 将画布内容转换为Base64编码的图片数据URL
const base64DataURL = canvas.toDataURL('image/jpeg');
// 发送数据到后端
fetch('/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ image: base64DataURL }),
})
.then(response => response.json())
.then(data => {
// 处理后端返回的数据
console.log(data);
})
.catch(error => {
console.error(error);
});
};
image.src = imageDataURL;
};
reader.readAsDataURL(file);
后端(Express)代码:
const express = require('express');
const bodyParser = require('body-parser');
const sharp = require('sharp');
const app = express();
app.use(bodyParser.json());
app.post('/upload', (req, res) => {
const { image } = req.body;
// 解码Base64编码的图片数据URL并获取图片维度信息
const buffer = Buffer.from(image.replace(/^data:image\/\w+;base64,/, ''), 'base64');
sharp(buffer)
.metadata()
.then(metadata => {
const { width, height } = metadata;
// 返回图片维度信息
res.json({ width, height });
})
.catch(error => {
console.error(error);
res.status(500).json({ error: 'Internal Server Error' });
});
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
这个示例代码演示了如何将图片维度从JavaScript发送到后端(Express)。在前端,我们使用HTML5的File API读取用户选择的图片文件,并将其绘制到画布上。然后将画布内容转换为Base64编码的图片数据URL,并通过Ajax或Fetch发送到后端。在后端,我们使用sharp
库解码Base64编码的图片数据URL,并获取图片的宽度和高度信息,然后将其返回给前端。
领取专属 10元无门槛券
手把手带您无忧上云