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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = previewImg;

var _compressPic = _interopRequireDefault(require("./compressPic"));

var _index = require("@/_config/index");

// 通过文件流生成img标签，预览图片
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 = _index.selfPasteImgAltText; // 压缩图片，渲染页面

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

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

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