如何通过JavaScript客户端将.ashx转换为.jpeg以适配jsPDF生成PDF？

当然可以搞定！你遇到的问题本质上不是.ashx格式的问题——那些链接其实返回的就是图片内容，只是URL后缀是ashx而已。我们可以借助Canvas在客户端把这些图片转成jsPDF支持的JPEG格式，直接用于生成PDF。

核心思路 #

1. 把.ashx链接对应的图片加载到浏览器的Image对象中
2. 将图片绘制到Canvas上
3. 从Canvas导出JPEG格式的Data URL（这就是jsPDF能识别的格式）
4. 把Data URL传入jsPDF，批量添加到PDF文件中

完整代码示例 #

首先，封装一个异步函数来处理单张图片的格式转换：

async function convertAshxToJpeg(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 处理跨域请求，很多图片服务器需要这个才能正常加载到Canvas
    img.crossOrigin = 'anonymous';
    
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      
      // 将图片绘制到Canvas
      ctx.drawImage(img, 0, 0);
      // 导出为JPEG格式的Data URL，第二个参数是图片质量（0-1，1为最高质量）
      const jpegDataUrl = canvas.toDataURL('image/jpeg', 0.9);
      resolve(jpegDataUrl);
    };
    
    img.onerror = (err) => {
      reject(`加载图片失败: ${err.message}`);
    };
    
    img.src = imageUrl;
  });
}

然后，编写批量生成PDF的函数：

async function createCardsPdf(imageUrls) {
  // 初始化jsPDF实例（确保你已经引入了jsPDF库）
  const pdfDoc = new jsPDF();
  const pageWidth = pdfDoc.internal.pageSize.getWidth();
  
  for (let index = 0; index < imageUrls.length; index++) {
    try {
      const jpegData = await convertAshxToJpeg(imageUrls[index]);
      
      // 计算图片缩放比例，让图片适配PDF页面宽度
      const img = new Image();
      img.src = jpegData;
      const scale = pageWidth / img.width;
      const imgWidth = pageWidth;
      const imgHeight = img.height * scale;
      
      // 除了第一张图，每添加一张新图就新建一页
      if (index !== 0) {
        pdfDoc.addPage();
      }
      
      // 将JPEG图片添加到PDF
      pdfDoc.addImage(jpegData, 'JPEG', 0, 0, imgWidth, imgHeight);
    } catch (error) {
      console.error(`处理第${index+1}张图片失败:`, error);
    }
  }
  
  // 保存生成的PDF
  pdfDoc.save('magic-cards.pdf');
}

// 调用示例，传入你的.ashx图片链接数组
const cardImageUrls = [
  'http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=3849&type=card',
  'http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=2923&type=card'
];

createCardsPdf(cardImageUrls);

注意事项 #

• 跨域问题：如果遇到CORS错误，说明图片服务器不允许直接跨域加载。这种情况下你需要用后端代理转发图片请求，不过你提供的Gatherer链接应该是允许跨域的，测试下来可以正常使用。
• 图片尺寸：代码里的缩放逻辑是让图片宽度适配PDF页面，你可以根据自己的需求调整尺寸参数，比如让图片居中显示或者调整边距。
• jsPDF版本：确保使用较新的jsPDF版本，旧版本可能对Data URL的支持有兼容性问题。

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