上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

js png去透明背景

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5085

    回帖

    5959

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5959

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 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>
    
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表