基于Node.js在Heroku下载图片并获取Canvas可用访问URL

我完全理解你的需求——搭建一个CORS兼容的代理服务器，让客户端能安全加载图片到Canvas里，同时暂时聚焦在Heroku的Node.js实现上，先不考虑S3这类持久化方案。下面是一步步的具体实现方案：

1. 准备项目依赖 #

首先确保你的Node.js项目安装了必要的依赖：

npm install express axios cors

• express：用来搭建基础的Web服务器
• axios：负责从目标URL下载图片（也可以用node-fetch替代）
• cors：处理跨域请求，让客户端能正常访问代理接口

2. 核心服务器代码实现 #

这里有几个关键细节要注意：Heroku的临时文件系统推荐用/tmp目录（比项目根目录的读写权限更稳定），同时要生成唯一文件名避免请求冲突。

const express = require('express');
const cors = require('cors');
const axios = require('axios');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;

// 启用CORS，默认允许所有来源（可根据需求限制特定域名）
app.use(cors());

// 处理图片代理请求的核心路由
app.get('/proxy-image', async (req, res) => {
  try {
    // 获取客户端传入的目标图片URL
    const imageUrl = req.query.url;
    if (!imageUrl) {
      return res.status(400).send('请传入目标图片URL参数（?url=xxx）');
    }

    // 生成唯一文件名，防止多请求覆盖
    const uniqueFileName = `img-${Date.now()}-${Math.random().toString(36).slice(2, 10)}.jpg`;
    // 使用Heroku的临时存储目录/tmp
    const savePath = path.join('/tmp', uniqueFileName);

    // 流式下载图片到临时文件
    const imageStream = await axios({
      url: imageUrl,
      method: 'GET',
      responseType: 'stream'
    });

    const fileWriter = fs.createWriteStream(savePath);
    imageStream.data.pipe(fileWriter);

    // 等待文件写入完成
    await new Promise((resolve, reject) => {
      fileWriter.on('finish', resolve);
      fileWriter.on('error', reject);
    });

    // 构造并返回代理后的图片访问URL
    const proxyImageUrl = `${req.protocol}://${req.get('host')}/images/${uniqueFileName}`;
    res.status(200).send(proxyImageUrl);
  } catch (error) {
    console.error('处理图片时出错:', error);
    res.status(500).send('图片代理失败，请检查目标URL是否有效');
  }
});

// 提供临时图片的静态访问路由
app.use('/images', express.static('/tmp'));

// 启动服务器
app.listen(PORT, () => {
  console.log(`代理服务器已启动，端口：${PORT}`);
});

3. 关键注意事项（针对Heroku环境） #

• 临时文件生命周期：Heroku的/tmp目录文件会在应用重启、缩放实例或超过24小时后被自动清除，这点你已经了解，所以这个方案只适合短期需要访问的图片。
• 文件名唯一性：用时间戳+随机字符串生成文件名，避免多个并发请求同时写入时覆盖文件。
• CORS自定义配置：如果需要限制仅允许特定客户端域名访问，可以修改cors()的参数，比如：

  app.use(cors({ origin: 'https://your-client-domain.com' }));
  

• 图片格式兼容：示例用了.jpg后缀，如果需要支持PNG、GIF等格式，可以从目标URL的后缀或响应的Content-Type头动态生成文件名后缀。

4. 客户端调用示例 #

客户端只需请求你的代理接口拿到URL，就能安全加载到Canvas：

// 请求代理服务器获取可安全访问的图片URL
fetch('https://your-heroku-app.herokuapp.com/proxy-image?url=https://example.com/target-image.jpg')
  .then(res => res.text())
  .then(proxyUrl => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.getElementById('my-canvas');
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      // 现在可以安全操作Canvas，不会触发跨域污染问题
    };
    img.src = proxyUrl;
  })
  .catch(err => console.error('获取代理图片失败:', err));

内容的提问来源于stack exchange，提问作者Nikaoto