js图片上传编辑

<input type="file" id="imageUpload" accept="image/*">
<canvas id="imageCanvas"></canvas>
<button id="uploadButton">上传图片</button>

const imageUpload = document.getElementById('imageUpload');
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
let img = new Image();

imageUpload.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        img.src = e.target.result;
        img.onload = function() {
            // 设置canvas尺寸
            canvas.width = img.width;
            canvas.height = img.height;
            // 绘制图片到canvas
            ctx.drawImage(img, 0, 0);
        };
    };
    reader.readAsDataURL(file);
});

document.getElementById('uploadButton').addEventListener('click', function() {
    // 将canvas内容转换为数据URL
    const dataURL = canvas.toDataURL('image/png');
    // 发送到服务器
    fetch('/upload', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ image: dataURL })
    }).then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
});

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const { createCanvas, loadImage } = require('canvas');
const fs = require('fs');

app.use(bodyParser.json({ limit: '50mb' }));

app.post('/upload', async (req, res) => {
    const dataURL = req.body.image;
    const base64Data = dataURL.replace(/^data:image\/png;base64,/, '');
    const buffer = Buffer.from(base64Data, 'base64');

    // 保存图片到服务器
    fs.writeFileSync('uploaded_image.png', buffer);
    res.json({ message: '图片上传成功' });
});

app.listen(3000, () => console.log('Server running on port 3000'));