日志

日志

莹夜 ·

提取字幕

ffmpeg -i in.mkv -an -vn -scodec copy -map 0:s:x out.ass

0:s:x的x为第几个字幕,数字从0开始。
输出的字幕格式需要根据视频内的来指定,有ass,srt,sup等等…

莹夜 ·

openssh-server升级后无法使用ssh-rsa私钥进行登录解决方案:
往/etc/ssh/sshd_config文件的最后追加这一行

PubkeyAcceptedKeyTypes=+ssh-rsa

然后再重启ssh服务

莹夜 ·

图片规格批量处理

<!DOCTYPE html>
<html lang="zh-CN">

<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>图片规格批量处理</title>
  <script src="https://cdn.staticfile.org/jszip/3.10.0/jszip.min.js"></script>
  <style>
    #machining_root {
      padding-top: 20px;
      text-align: center;
    }

    #machining_root input {
      width: 150px;
    }
  </style>
</head>

<body>
  <div id="machining_root">
    <input type="file" accept="image/*" multiple="true" onchange="handlerFile(event)" />
    <p class="filename"></p>
    <p class="progress"></p>
  </div>
</body>

<script type="text/javascript">
  // QQ发图允许的最大图片像素数: 20249108
  const maxSize = 20249108;
  // 允许的最大宽度是4500
  const maxWidth = 4500;
  // 允许的最大高度是10000
  const maxHeight = 10000;
  const filename = document.querySelector("#machining_root .filename");
  const progress = document.querySelector("#machining_root .progress");

  async function handlerFile(e) {
    e.target.setAttribute("disabled", true);

    /** @type {Array<File>} */
    const files = Array.from(e.target.files);

    if (files.length <= 0) {
      e.target.removeAttribute("disabled");
      return;
    }

    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    const zip = new JSZip();

    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      filename.innerText = "正在处理: " + file.name;
      progress.innerText = `处理进度: ${i + 1}/${files.length}`;

      const img = new Image();
      img.src = URL.createObjectURL(file);
      await new Promise(resolve => {
        img.onload = () => {
          resolve();
        }
      });

      const [imgWidth, imgHeight] = getReasonableSize(getReasonablePixels(img));

      canvas.width = imgWidth;
      canvas.height = imgHeight;

      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
      const blobLink = await new Promise(resolve => {
        canvas.toBlob(resolve, "image/jpeg", 0.95);
      });

      const fn = file.name.substring(0, file.name.lastIndexOf(".")) + ".jpg";
      zip.file(fn, new File([blobLink], fn));
    }

    zip.generateAsync({ type: "blob" })
      .then((zipBlob) => {
        const aTag = document.createElement("a");
        aTag.download = Date.now() + ".zip";
        aTag.href = URL.createObjectURL(zipBlob);
        aTag.click();
        e.target.removeAttribute("disabled");
      });
  }

  /**
   * 获取不超过QQ发送图片像素上限的分辨率
   * @param {HTMLImageElement} r
   * @returns [number, number]
   */
  function getReasonablePixels(r) {
    let _p = 1;
    if (r.width * r.height > maxSize) {
      while ((r.width * _p) * (r.height * _p) > maxSize) {
        _p -= 0.01;
      }
      return [r.width * _p, r.height * _p];
    } else {
      return [r.width, r.height];
    }
  }

  /**
   * 获取宽不超过3638,高不超过5566的分辨率
   * @param {[number, number]} r
   * @returns [number, number]
   */
  function getReasonableSize(r) {
    if (r[0] > maxWidth || r[1] > maxHeight) {
      if (r[0] > r[1]) {
        _p = (maxWidth / r[0]).toFixed(3);
        r[0] = maxWidth;
        r[1] = r[1] * _p;
      } else {
        _p = (maxHeight / r[1]).toFixed(3);
        r[1] = maxHeight;
        r[0] = r[0] * _p;
      }
    }
    return r;
  }
</script>

</html>
莹夜 ·

修改ubuntu时区到东八区

timedatectl set-timezone Asia/Shanghai
莹夜 ·
    preProcesser(/** @type {WechatMiniprogram.Canvas} */ canvas, /** @type { CanvasRenderingContext2D } */ ctx, img, /** @type {Number} */ index,) {
        switch (imgOrientation[index]) {
            case "up": {
                canvas.width = imgWidth[index];
                canvas.height = imgHeight[index];
                ctx.drawImage(img, 0, 0, imgWidth[index], imgHeight[index]);
                console.log(imgWidth[index], imgHeight[index]);
                break;
            }
            case "right": {
                // left和right方向需要交换width和height
                [imgWidth[index], imgHeight[index]] = [imgHeight[index], imgWidth[index]];
                canvas.width = imgWidth[index];
                canvas.height = imgHeight[index];
                ctx.translate(imgHeight[index] / 2, imgWidth[index] / 2)
                ctx.drawImage(img, -imgHeight[index] / 2, -imgWidth[index] / 2, imgWidth[index], imgHeight[index])
                ctx.rotate(90 * Math.PI / 180)
                break;
            }
            case "down": {
                canvas.width = imgWidth[index];
                canvas.height = imgHeight[index];
                ctx.translate(imgWidth[index] / 2, imgHeight[index] / 2)
                ctx.drawImage(img, -imgWidth[index] / 2, -imgHeight[index] / 2, imgWidth[index], imgHeight[index])
                ctx.rotate(180 * Math.PI / 180)
                break;
            }
            case "left": {
                // left和right方向需要交换width和height
                [imgWidth[index], imgHeight[index]] = [imgHeight[index], imgWidth[index]];
                canvas.width = imgWidth[index];
                canvas.height = imgHeight[index];
                ctx.translate(imgHeight[index] / 2, imgWidth[index] / 2)
                ctx.drawImage(img, -imgHeight[index] / 2, -imgWidth[index] / 2, imgWidth[index], imgHeight[index])
                ctx.rotate(270 * Math.PI / 180)
                break;
            }
        }
    },

小程序根据图片的orientation信息纠正图片方向
引用链接:ios手机竖屏拍照图片旋转90°问题解决方法

莹夜 ·

canvas转存图片文件

<!DOCTYPE html>
<html lang="zh=CN">

<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>canvas2png</title>
</head>

<body>
  <canvas width="300" height="120"></canvas>
</body>

<script>
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");

  // 创建渐变色,指定渐变色覆盖范围
  var lingrad = ctx.createLinearGradient(0, 0, 300, 120);
  lingrad.addColorStop(0, '#FFCCCC');
  lingrad.addColorStop(1, '#CCFFFF');
  ctx.fillStyle = lingrad;
  // 将渐变色画进canvas
  ctx.fillRect(0, 0, 300, 120);

  const dl = document.createElement("a");
  dl.download = Date.now() + '.png';
  canvas.toBlob(b => {
    dl.href = URL.createObjectURL(b);
    dl.click();
  }, 'image/png');
</script>

</html>

引用: canvas2image

莹夜 ·

Xue主题文章正文无法加载,下载最新主题包即可解决问题。
ISSUES: 文章正文刷新不出来

莹夜 ·

mariadb修改最大连接数
修改my.ini文件,在[mysqld]中添加如下语句

max_connections=3000
莹夜 ·

微信小程序简单做一个盖章动画。
js:

this.setData({
  showSeal: true,
})
this.animate(".seal", [
  {opacity: 0, scale: [5, 5]},
  {opacity: 1, scale: [1, 1], ease: 'ease'}
], 700, function () {
  this.clearAnimation(".seal");
}.bind(this));

wxml:

<view class="seal">
  <image wx:if="{{showSeal}}" mode="aspectFit" src="{{sealImg}}"></image>
</view>