完全可行！你遇到的问题是代码里几个关键细节没处理好，我帮你梳理问题并给出修正后的完整方案：

原代码的核心问题 #

• 你定义了myCanvas函数，但从来没调用过它，代码根本没有执行
• 错误使用getImageData和putImageData：这两个方法是用来操作Canvas像素数据的，不是直接绘制页面上已有图片的正确方式
• 未处理图片加载状态：如果图片还没加载完成就尝试绘制，Canvas会显示空白
• 最后把Canvas转成Image再绘制回去的操作完全多余，没必要这么做

修正后的完整代码 #

<div id="pics" > 
  <img id="i1" class="images" src="http://chris.chrisjneeds.com/images/stars/stars01.jpg" width="300" height="277" style="position: fixed;"> 
  <img id="i2" class="images" src="http://chris.chrisjneeds.com/images/ships/ships26.png" width="300" height="277" style="position: fixed;"> 
</div> 
<canvas id="myCanvas" width="300" height="277" style="border:1px solid #d3d3d3; float: right"> 
  Your browser does not support the HTML5 canvas tag.
</canvas> 

<script>
function mergeFixedImagesToCanvas() {
  // 获取目标元素
  const imageElements = document.getElementsByClassName('images');
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  // 跟踪图片加载状态，确保所有图片加载完成后再绘制
  let loadedImages = 0;
  const totalImages = imageElements.length;

  // 遍历处理每张图片
  for (let i = 0; i < totalImages; i++) {
    const img = imageElements[i];
    
    // 图片已加载完成的情况
    if (img.complete) {
      loadedImages++;
      checkReadyToDraw();
    } else {
      // 监听加载完成事件
      img.onload = () => {
        loadedImages++;
        checkReadyToDraw();
      };
      // 处理加载失败的情况
      img.onerror = () => {
        console.error(`Failed to load image: ${img.src}`);
        loadedImages++;
        checkReadyToDraw();
      };
    }
  }

  // 所有图片加载完成后开始绘制
  function checkReadyToDraw() {
    if (loadedImages === totalImages) {
      // 按页面上的顺序绘制图片（后绘制的会覆盖先绘制的，和页面显示一致）
      for (const img of imageElements) {
        // 获取图片在视口中的位置，保证合成位置和页面fixed定位一致
        const position = img.getBoundingClientRect();
        // 绘制图片到Canvas，坐标、尺寸可以根据需求调整
        ctx.drawImage(img, position.left, position.top, img.width, img.height);
      }

      // 如果需要保存合成图，这里可以获取DataURL并创建下载链接
      // const compositeImageUrl = canvas.toDataURL('image/png');
      // const downloadLink = document.createElement('a');
      // downloadLink.href = compositeImageUrl;
      // downloadLink.download = 'composite-image.png';
      // downloadLink.click();
    }
  }
}

// 一定要调用函数才会执行合成操作！
mergeFixedImagesToCanvas();
</script>

关键细节说明 #

1. 调用函数：最后一定要执行定义好的合成函数，不然代码只是定义了却不会运行
2. 等待图片加载：图片是异步加载的，必须等所有图片都加载完成再绘制，否则会出现空白
3. 正确使用drawImage：直接传入页面上的img元素就能把它画到Canvas里，这是最直接高效的方式
4. 匹配定位位置：用getBoundingClientRect()获取图片的fixed定位坐标，这样合成图的布局和页面上的显示完全一致；如果不需要和页面位置一致，直接传入0,0这类固定坐标就行

这样修改后，Canvas就能正确显示合成后的图片了，你还可以通过注释里的代码把合成图下载到本地。

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