为何drawImage函数绘制彩色PNG图片时显示为黑色？

嘿，我之前也碰到过类似的情况！Canvas把彩色PNG画成黑色，大概率是下面几个常见原因导致的，给你几个针对性的解决方案试试：

• 重置Canvas混合模式
  很可能是之前的代码不小心把Canvas的全局混合模式改成了会过滤颜色的类型，比如destination-in或者source-in。你可以在绘制贴纸前把它重置为默认的source-over：

  img.onload = function() {
    // 先重置混合模式为默认
    context.globalCompositeOperation = "source-over";
    context.drawImage(img, 0, 0, 320, 240);
  }
  

• 检查填充/描边样式的影响
  如果之前用Canvas绘制过图形，可能误设置了填充或描边样式为黑色，虽然drawImage本身不应该受这个影响，但保险起见可以在绘制前重置一下：

  img.onload = function() {
    context.fillStyle = "#000"; // 重置默认填充色
    context.strokeStyle = "#000"; // 重置默认描边色
    context.drawImage(img, 0, 0, 320, 240);
  }
  

• 排查跨域和图片路径问题
  如果你是直接用file://协议打开本地HTML文件，部分浏览器会有跨域限制，导致图片加载异常显示为黑色。可以试试：

  1. 把图片和HTML文件放在同一个文件夹，确认sticker变量里的路径是正确的相对路径
  2. 给Image对象添加跨域属性：

     var img = new Image;
     img.crossOrigin = "anonymous";
     img.onload = function() {
       context.drawImage(img, 0, 0, 320, 240);
     }
     img.src = sticker;
     

  3. 用本地服务器（比如用Node.js的http-server）来运行你的页面，避免file://协议的限制

• 确认图片是否成功加载
  可以加个错误监听，看看是不是图片路径错了导致加载失败：

  img.onload = function() {
    console.log("图片加载完成，宽高：", img.width, img.height);
    context.drawImage(img, 0, 0, 320, 240);
  }
  img.onerror = function() {
    console.error("图片加载失败，路径：", sticker);
  }
  

  如果控制台打印加载失败，那就是路径的问题，得核对下拉选项里的value值是不是正确的图片路径。

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