1. word生成优化图片大小生成逻辑

riku

2024-11-18 ca5ac89a24c6ace3fb7897b4b238b243059dcb43

1. word生成优化图片大小生成逻辑

 src/components.d.ts

@@ -12,18 +12,23 @@
    BasePanelLayout: typeof import('./components/core/BasePanelLayout.vue')['default']
    CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default']
    Content: typeof import('./components/core/Content.vue')['default']
    ElAffix: typeof import('element-plus/es')['ElAffix']
    ElAside: typeof import('element-plus/es')['ElAside']
    ElAvatar: typeof import('element-plus/es')['ElAvatar']
    ElBadge: typeof import('element-plus/es')['ElBadge']
    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCalendar: typeof import('element-plus/es')['ElCalendar']
    ElCard: typeof import('element-plus/es')['ElCard']
    ElCascader: typeof import('element-plus/es')['ElCascader']
    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
    ElCol: typeof import('element-plus/es')['ElCol']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']
    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
    ElContainer: typeof import('element-plus/es')['ElContainer']
    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
    ElDialog: typeof import('element-plus/es')['ElDialog']
@@ -36,25 +41,36 @@
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElImage: typeof import('element-plus/es')['ElImage']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElLink: typeof import('element-plus/es')['ElLink']
    ElMain: typeof import('element-plus/es')['ElMain']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
    ElPopover: typeof import('element-plus/es')['ElPopover']
    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSegmented: typeof import('element-plus/es')['ElSegmented']
    ElSelect: typeof import('element-plus/es')['ElSelect']
    ElSpace: typeof import('element-plus/es')['ElSpace']
    ElStep: typeof import('element-plus/es')['ElStep']
    ElSteps: typeof import('element-plus/es')['ElSteps']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
    ElTabs: typeof import('element-plus/es')['ElTabs']
    ElTag: typeof import('element-plus/es')['ElTag']
    ElText: typeof import('element-plus/es')['ElText']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    ElTransfer: typeof import('element-plus/es')['ElTransfer']
    ElTree: typeof import('element-plus/es')['ElTree']
    ElUpload: typeof import('element-plus/es')['ElUpload']
    Footer: typeof import('./components/core/Footer.vue')['default']

 src/utils/doc.js

@@ -3,9 +3,100 @@
import docxtemplater from 'docxtemplater';
import ImageModule from 'docxtemplater-image-module-free';
import Pizzip from 'pizzip';
import PizZipUtils from 'pizzip/utils/dist/pizzip-utils';
import FileSaver from 'file-saver';
import fs from 'fs';

/**
 * 等比例缩放图片
 * 根据图片的长宽比进行不同方式的缩放
 * 如果宽度大于高度（横拍图片），则按照设定高度等比缩放；
 * 如果宽度小于高度（竖拍图片），则按照设定宽度等比缩放；
 * @param {Number} horizontalHeight 设定高度
 * @param {Number} verticalWidth 设定宽度
 * @param {*} img
 * @param {*} tagValue
 * @param {*} tagName
 * @returns
 */
function getSizeProportional(
  horizontalHeight,
  verticalWidth,
  img,
  tagValue,
  tagName
) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.src = tagValue;
    image.onload = function () {
      let width = image.width;
      let height = image.height;
      // console.log('width height', width, height);

      if (width > height && horizontalHeight && height > horizontalHeight) {
        const scale = image.height / horizontalHeight;
        height = horizontalHeight;
        width = image.width / scale;
      } else if (width <= height && verticalWidth && width > verticalWidth) {
        const scale = image.width / verticalWidth;
        width = verticalWidth;
        height = image.height / scale;
      }
      // console.log('scale', width, height);

      resolve([width, height]);
    };
    image.onerror = function (e) {
      console.log('img, tagValue, tagName : ', img, tagValue, tagName);
      alert('An error occured while loading ' + tagValue);
      reject(e);
    };
  });
}

/**
 * 固定大小缩放图片
 * 根据图片的长宽比进行不同方式的缩放
 * 如果宽度大于高度（横拍图片），则按照设定高度和宽高比缩放；
 * 如果宽度小于高度（竖拍图片），则按照设定宽度和宽高比缩放；
 * @param {*} horizontalHeight 设定高度
 * @param {*} verticalWidth 设定宽度
 * @param {*} scale 缩放比例，长边除短边的比例系数
 * @param {*} img
 * @param {*} tagValue
 * @param {*} tagName
 * @returns
 */
function getSizeFixed(
  horizontalHeight,
  verticalWidth,
  scale,
  img,
  tagValue,
  tagName
) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.src = tagValue;
    image.onload = function () {
      let width = image.width;
      let height = image.height;

      if (width > height && horizontalHeight && height > horizontalHeight && scale) {
        height = horizontalHeight;
        width = horizontalHeight * scale;
      } else if (width <= height && verticalWidth && width > verticalWidth && scale) {
        width = verticalWidth;
        height = verticalWidth * scale;
      }
      resolve([width, height]);
    };
    image.onerror = function (e) {
      console.log('img, tagValue, tagName : ', img, tagValue, tagName);
      alert('An error occured while loading ' + tagValue);
      reject(e);
    };
  });
}

/**
 * 获取图片配置信息
@@ -14,8 +105,8 @@
 * @returns
 */
function getImageOptions(options) {
  const horizontalHeight = options ? options.horizontalHeight : undefined
  const verticalWidth = options ? options.verticalWidth : undefined
  const horizontalHeight = options ? options.horizontalHeight : undefined;
  const verticalWidth = options ? options.verticalWidth : undefined;
  return {
    centered: false,
    fileType: 'docx',
@@ -30,34 +121,17 @@
        });
      });
    },

    getSize(img, tagValue, tagName) {
      return new Promise(function (resolve, reject) {
        const image = new Image();
        image.src = tagValue;
        image.onload = function () {
          let width = image.width;
          let height = image.height;
          // console.log('width height', width, height);

          if (width > height && horizontalHeight && height > horizontalHeight) {
            const scale = image.height / horizontalHeight;
            height = horizontalHeight;
            width = image.width / scale;
          } else if (width <= height && verticalWidth && width > verticalWidth) {
            const scale = image.width / verticalWidth;
            width = verticalWidth;
            height = image.height / scale;
          }
          // console.log('scale', width, height);

          resolve([width, height]);
        };
        image.onerror = function (e) {
          console.log('img, tagValue, tagName : ', img, tagValue, tagName);
          alert('An error occured while loading ' + tagValue);
          reject(e);
        };
      });
      // return getSizeProportional(horizontalHeight, verticalWidth, img, tagValue, tagName)
      return getSizeFixed(
        horizontalHeight,
        verticalWidth,
        options.scale,
        img,
        tagValue,
        tagName
      );
    }
  };
}