js png去透明背景

李恒道 · 发表于 2022-9-15 18:46:58

利用canvas绘制白色背景后绘制图片
然后导出一个jpeg格式实现无透明背景
代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas></canvas>
  </body>
  <script>
    const canvas = document.querySelector("canvas");
    const context = canvas.getContext("2d");

    const image = new Image();
    image.src = "./1.png";
    image.onload = function () {
      canvas.width = image.width;
      canvas.height = image.height;
      context.fillStyle = "#fff"; /// set white fill style
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.drawImage(image, 0, 0);

      const export_jpg = canvas.toDataURL("image/jpeg");
      const a = document.createElement("a");
      a.href = export_jpg;
      a.download = "test.jpg";
      a.click();
    };
  </script>
</html>

js png去透明背景

发表回复

荣誉开发者

喜迎中秋

油中2周年

生态建设者