如何将动态生成的图片链接传入merge-images进行图片合并？

1. 处理远程图片的跨域与格式兼容 #

merge-images基于Canvas实现图片合并，直接传入远程图片链接可能触发跨域限制，需要先将远程图片转换为Canvas可识别的Base64格式：

async function convertRemoteImgToBase64(url) {
  const res = await fetch(url);
  const blob = await res.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

2. 整合本地与远程图片的合并逻辑 #

本地导入的静态图片（logo、backg）可直接传入mergeImages，远程二维码链接先转成Base64再参与合并：

import logo from './logo-left.jpg';
import backg from './back.png';

async function generateMergedLabel() {
  // 动态获取的二维码链接
  const qrCodeUrl = "www.exampleImageLink.test/img";
  // 转换远程图片为Base64
  const qrCodeBase64 = await convertRemoteImgToBase64(qrCodeUrl);
  
  const mergedResult = await mergeImages([
    { src: backg },
    { src: logo, y: 50, x: 20 },
    { src: qrCodeBase64, x: 600, y: 55 }
  ]);
  
  setImg(mergedResult);
}

// 执行合并操作
generateMergedLabel();

3. 关键注意点 #

• 确保远程图片所在服务器配置了CORS允许跨域请求，否则fetch会失败；若无法控制服务器，需通过后端代理转发图片请求。
• 本地导入的图片在前端构建工具（如Webpack）中会被自动处理为可直接使用的资源链接/Base64，无需额外转换。

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