console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
  <title>分类nk代码转换</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta http-equiv="Access-Control-Allow-Origin" content="*" />
  <meta name="format-detection" content="telephone=no" />
  <meta http-equiv="pragma" content="no-cache" />
  <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.0/jquery.min.js"></script>
  <script>
    var w = document.documentElement.clientWidth;
    if (w <= 640) {
      document.documentElement.style.fontSize = Math.floor(w * 100 / 640) + "px";
    }
    else {
      document.documentElement.style.fontSize = 640 * 100 / 640 + "px";
    }
  </script>

  <style>
      .flexfow{
          display:flex;
          font-size:14px;
          justify-content:flex-start;
         
      }
      #from{
           display:flex;
           font-size:16px;
           flex-direction:column;
           margin-top:50px;
           width:100%;
           align-items:center;
      }
      .tips{
           margin-bottom:10px;
            font-size:12px;
            color:#999;
      }
      .area{
          width:300px;
          height:100px;
          margin-top:20px;
      }
  </style>
</head>

<body>
  <div id="from">
      <div class="flexfow">
          <div>弹窗图片地址：</div>
          <input id="picsrc" style="width:300px;height:20px;" placeholder="请填写png格式图片" />
      </div>
      <div class="tips">请填写png格式图片地址</div>
      <img id="fmpic" src="https://img.alicdn.com/imgextra/i4/907349826/O1CN01Ei6mQT2MSMjURDXOu_!!907349826.png" style="width:300px;height:auto" />
    <button id="savebtn" style="margin-top:30px;">生成静态弹窗动画JSON</button>
    <textarea id="zhh" class="area" value=""></textarea>
    <canvas id="myCanvas" style="position:absolute;left:-2000px;"></canvas>
  </div>
  <!-- <div id="rk">请输入口令<input id="ri" /><button id="rb">确认</button></div> -->

</body>
<script>
  let picdiy = {"v":"5.12.2","fr":10,"ip":0,"op":300,"w":750,"h":1330,"nm":"弹窗图片","ddd":0,"assets":[{"id":"弹窗图片.png","w":750,"h":1330,"u":"","p":"https://img.alicdn.com/imgextra/i1/1768562735/O1CN01R2yLYZ1W4gGMCb6o9_!!1768562735.png","e":1}],"layers":[{"ddd":0,"ind":1,"ty":2,"nm":"弹窗图片.png","cl":"png","refId":"弹窗图片.png","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[375,665,0],"ix":2,"l":2},"a":{"a":0,"k":[375,665,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":300,"st":0,"cp":false,"bm":0}],"markers":[],"props":{}}
    $("#picsrc").on("input", function(e){
        var pic1 = $("#picsrc").val();
         $("#fmpic").attr("src", pic1)

    })
     $("#savebtn").on("click", function(e){
         let pic = $("#picsrc").val();
        if(pic){
                var img = new Image();
                img.src = pic;
                img.crossOrigin = "anonymous";
                img.onload = function() {
                    var canvas = document.getElementById('myCanvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    let ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0);
                    let base64 = canvas.toDataURL('image/png'); // 可以改为其他格式，如 'image/jpeg'
                    // callback(base64);

                    picdiy.assets[0].p = base64;
                    picdiy.assets[0].w = img.width;
                    picdiy.assets[0].h = img.height;
                    picdiy.w = img.width;
                    picdiy.h = img.height;
                    picdiy.layers[0].ks.p.k[0] = img.width/2;
                    picdiy.layers[0].ks.p.k[1] = img.height/2;
                    picdiy.layers[0].ks.a.k[0] = img.width/2;
                    picdiy.layers[0].ks.a.k[1] = img.height/2;
                    
                    
                    $("#zhh").val(JSON.stringify(picdiy));
                };
        }
    })



</script>

</html>