【已编辑】HTML5 Canvas toDataUrl仅在移动端渲染透明背景问题

结合你描述的场景（桌面端正常渲染、移动端仅显示透明背景），我之前踩过几乎一模一样的移动端Canvas渲染坑——核心问题都是移动端浏览器的Canvas实现细节和桌面端存在差异，给你几个针对性的排查修复方向：

1. 强制指定toDataURL的PNG编码格式 #

部分移动端浏览器对Canvas默认的toDataURL()输出格式支持有瑕疵，尤其是带Alpha通道的透明图。转换遮罩后的Canvas为dataURL时，显式指定编码参数：

// 不要用默认的toDataURL()，显式指定PNG格式和质量
const maskedDataUrl = secondCanvas.toDataURL('image/png', 1.0);

2. 检查遮罩合成模式的移动端兼容性 #

如果你是用globalCompositeOperation（比如source-in/destination-in）实现遮罩，部分老版本移动端浏览器对这些合成模式的处理和桌面端不一致。可以换成像素级的遮罩实现来兼容：

// 替代合成模式的像素级遮罩逻辑
const maskCtx = secondCanvas.getContext('2d');
const imageData = maskCtx.getImageData(0, 0, secondCanvas.width, secondCanvas.height);
const maskPixelData = maskCtx.getImageData(0, 0, secondCanvas.width, secondCanvas.height).data;

// 遍历像素，根据遮罩的Alpha值调整原图透明度
for (let i = 0; i < imageData.data.length; i += 4) {
  imageData.data[i + 3] = imageData.data[i + 3] * (maskPixelData[i + 3] / 255);
}
maskCtx.putImageData(imageData, 0, 0);

3. 强制适配尺寸为整数像素 #

移动端浏览器对非整数尺寸的Canvas渲染异常挑剔，如果你在调整遮罩图尺寸适配第一个Canvas时用了小数宽高，会直接导致透明渲染。适配时务必强制取整：

// 用Math.round/ceil/floor将尺寸转为整数
const targetWidth = Math.round(firstCanvas.width);
const targetHeight = Math.round(firstCanvas.height);
// 绘制时使用整数参数
firstCtx.drawImage(maskedImage, 0, 0, targetWidth, targetHeight);

4. 验证Image加载的完整性（移动端专属） #

即使你监听了onload事件，部分移动端浏览器可能会提前触发该事件（仅加载完图片元数据，像素数据未完全解码）。可以在onload里加一层完整性验证：

const maskedImage = new Image();
maskedImage.onload = function() {
  // 确保图片完全加载完成
  if (this.complete && this.naturalWidth > 0) {
    // 执行绘制到第一个Canvas的逻辑
    firstCtx.drawImage(this, 0, 0, targetWidth, targetHeight);
  } else {
    // 重试加载
    setTimeout(() => maskedImage.src = maskedDataUrl, 100);
  }
};
maskedImage.src = maskedDataUrl;

5. 检查Canvas上下文的Alpha属性设置 #

如果创建Canvas上下文时指定了alpha: false，移动端浏览器会忽略透明通道，导致遮罩后的透明区域异常。确保保留Alpha通道：

// 不要设置alpha: false，默认即为true，保留透明通道
const ctx = canvas.getContext('2d', { alpha: true });

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