z-react-ui/es/_utils/chat/previewImg.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import compressPic from './compressPic';
import { selfPasteImgAltText } from '@/_config/index'; // 通过文件流生成img标签，预览图片

export default function previewImg(file, callback) {
  if (!file) return; // 预览图片

  var reader = new FileReader();

  reader.onload = function (event) {
    var _event$target;

    // 图片内容
    var imgContent = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result; // 创建img标签

    var img = document.createElement('img'); // 获取当前base64图片信息，计算当前图片宽高以及压缩比例

    var imgObj = new Image();
    var imgWidth;
    var imgHeight;
    var scale = 1;
    imgObj.src = imgContent;

    imgObj.onload = function () {
      // 计算img宽高
      if (imgObj.width < 400) {
        imgWidth = imgObj.width;
        imgHeight = imgObj.height;
      } else {
        // 输入框图片显示缩小10倍
        imgWidth = imgObj.width / 10;
        imgHeight = imgObj.height / 10; // 图片宽度大于1920，图片压缩1.5倍

        if (imgObj.width > 1920) {
          // 真实比例缩小1.5倍
          scale = 1.5;
        }
      } // 设置可编辑div中图片宽高


      img.width = imgWidth;
      img.height = imgHeight; // 这个属性，我们应来判断是否是粘贴而来的

      img.alt = selfPasteImgAltText; // 压缩图片，渲染页面

      compressPic(imgContent, scale, function (newBlob, newBase) {
        img.src = newBase; // 设置链接

        callback && callback(img);
      });
    };
  };

  if (file) {
    // 文件不为空时渲染
    reader.readAsDataURL(file);
  }
}