使用docxtemplater-image-module-free时支持动态获取图片大小

使用docxtemplater-image-module-free时支持动态获取图片大小

1、问题背景

在使用docxtemplater-image-module-free生成模板图片时,写死了其中一个函数

javascript 复制代码
getSize() {
    return [150, 150];
},

导致图片都是一个大小,且被拉扯的变形了

2、报错信息

在去掉这个函数时报错:

shell 复制代码
Error: You should pass getSize

因此该函数必须规定图片的大小

3、电脑环境

  • 操作系统: Windows 11
  • docxtemplater-image-module-free:1.1.1
  • docxtemplater:3.40.3
  • node.js:18.18.2

4、解决问题

4.1、问题思路

查找docxtemplater-image-module-free的官方文档:https://docxtemplater.com/modules/image/#usage-browser

发现完全可以自定义图片的大小

4.2、解决方法

在浏览器环境中,使用Image对象动态获取图片的大小

js 复制代码
getSize(img, url, tagName) {
    return new Promise(function (resolve, reject) {
        const image = new Image();
        image.src = url;
        image.onload = function () {
            resolve([image.width, image.height]);
        };
        image.onerror = function (e) {
            console.log(
                "img, url, tagName : ",
                img,
                url,
                tagName
            );
            alert(
                "An error occured while loading " +
                    url
            );
            reject(e);
        };
    });
},

node.js环境中,使用image-size获取图片的大小

javascript 复制代码
const sizeOf = require("image-size");

getSize(img) {
    const sizeObj = sizeOf(img);
    return [sizeObj.width, sizeObj.height];
}

4.3、优化

一般原图都会比较大,甚至撑满整个docx文档,因此需要设置最大高度和宽度,来响应式计算宽高

javascript 复制代码
getSize(img) {
    const sizeObj = sizeOf(img);
    const maxWidth = 300
    const maxHeight = 300
    let width = Number(sizeObj.width) || 0
    let height = Number(sizeObj.height) || 0
    // 根据需要进行尺寸调整
    if (width > maxWidth) {
    	height *= maxWidth / width;
    	width = maxWidth;
    }
    if (height > maxHeight) {
    	width *= maxHeight / height;
    	height = maxHeight;
    }
    return [width, height];
}
相关推荐
excel几秒前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组4 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽10 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳58123 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo23 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~42 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼1 小时前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636022 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端