前端a4纸尺寸转像素尺寸

前端必备工具推荐网站(免费图床、API和ChatAI等实用工具): luckycola.com.cn/


一、a4纸张有多大

A4纸的尺寸是210mm297mm,也就是21.0cm29.7cm, A4纸尺寸转屏幕像素尺寸和屏幕分辨率有关,首先1英寸=2.54cm, 如果屏幕DPI分辨率为72像素/英寸,换算一下:相当于1cm可呈现 (72px/2.54cm) =28.34px;

下面是一些常用分辨率下A4纸在屏幕上的像素尺寸: 分辨率是72像素/英寸时,A4纸的尺寸的图像的像素是595×842; 分辨率是96像素/英寸时,A4纸的尺寸的图像的像素是794×1123;(默认) 分辨率是120像素/英寸时,A4纸的尺寸的图像的像素是1487×2105; 分辨率是150像素/英寸时,A4纸的尺寸的图像的像素是1240×1754; 分辨率是300像素/英寸时,A4纸的尺寸的图像的像素是2480×3508;

其他的大小,一般标准印刷300dpi时: A4纸的尺寸的图像的像素是2480×3508; A3纸的尺寸的图像的像素是4960×3508; B3纸的尺寸的图像的像素是3248×4300; B4纸的尺寸的图像的像素是3248×2150;

二、如何通过js动态计算DPI

js 复制代码
function getDPI() {
    var tempDiv = document.createElement("div");
    tempDiv.style.width = "1in";
    tempDiv.style.visibility = "hidden";
    document.body.appendChild(tempDiv);
    var dpi = tempDiv.offsetWidth;
    document.body.removeChild(tempDiv);
    return dpi;
}

当我们将一个元素的宽度设置为1英寸时,并且不对其进行缩放或变形,浏览器会尽可能地在屏幕上以1英寸的尺寸显示这个元素。浏览器使用的像素数取决于显示器的DPI(每英寸的像素数),因此这个元素的实际宽度(以像素为单位)就反映了这个DPI。

基于这个原理,我们可以通过创建一个宽度为1英寸的元素并测量其像素宽度来获取屏幕的DPI。因为我们知道元素的实际宽度(以像素为单位)和我们设置的宽度(1英寸),所以我们可以简单地将元素的像素宽度作为屏幕的DPI。

这种方法的前提是浏览器正确地解释了 in(英寸)单位,并将其转换为正确的像素数。这样,我们就可以利用这一点来估算屏幕的DPI。

三、如何动态获取不同设备上的a4纸像素尺寸

基于上面js动态计算DPI的函数,我们就可以实现这样一个工具函数进行动态获取不同设备的a4纸像素尺寸了

js 复制代码
function getDPI() {
    var tempDiv = document.createElement("div");
    tempDiv.style.width = "1in";
    tempDiv.style.visibility = "hidden";
    document.body.appendChild(tempDiv);
    var dpi = tempDiv.offsetWidth;
    document.body.removeChild(tempDiv);
    return dpi;
}

function mmToPixel(mm, dpi) {
    // 1 inch = 25.4 mm
    var inches = mm / 25.4;
    var pixels = inches * dpi;
    return Math.round(pixels);
}

function a4SizeInPixels() {
    var dpi = getDPI();
    var width_mm = 210; // A4纸宽度,单位:毫米
    var height_mm = 297; // A4纸高度,单位:毫米
    var width_px = mmToPixel(width_mm, dpi);
    var height_px = mmToPixel(height_mm, dpi);
    return { width: width_px, height: height_px };
}

// 直接调用工具函数获取 A4 纸的像素尺寸
var a4_size = a4SizeInPixels();
console.log("A4纸的像素尺寸:宽 " + a4_size.width + "px, 高 " + a4_size.height + "px");

四、兼容A4、A3、B3、B4纸张的封装

js 复制代码
function getDPI() {
    var tempDiv = document.createElement("div");
    tempDiv.style.width = "1in";
    tempDiv.style.visibility = "hidden";
    document.body.appendChild(tempDiv);
    var dpi = tempDiv.offsetWidth;
    document.body.removeChild(tempDiv);
    return dpi;
}
function pageSizeInPixels(pageSize) {
    var dpi = getDPI();
    var width_mm, height_mm;

    switch (pageSize.toUpperCase()) {
        case "A3":
            width_mm = 297;
            height_mm = 420;
            break;
        case "A4":
            width_mm = 210;
            height_mm = 297;
            break;
        case "B3":
            width_mm = 353;
            height_mm = 500;
            break;
        case "B4":
            width_mm = 250;
            height_mm = 353;
            break;
        // Add more page sizes as needed
        default:
            return null; // Invalid page size
    }

    var width_px = mmToPixel(width_mm, dpi);
    var height_px = mmToPixel(height_mm, dpi);
    return { width: width_px, height: height_px };
}

// 获取A4纸的像素尺寸
var a4_size = pageSizeInPixels("A4");
console.log("A4纸的像素尺寸:宽 " + a4_size.width + "px, 高 " + a4_size.height + "px");

// 获取A3纸的像素尺寸
var a3_size = pageSizeInPixels("A3");
console.log("A3纸的像素尺寸:宽 " + a3_size.width + "px, 高 " + a3_size.height + "px");

// 获取B3纸的像素尺寸
var b3_size = pageSizeInPixels("B3");
console.log("B3纸的像素尺寸:宽 " + b3_size.width + "px, 高 " + b3_size.height + "px");

// 获取B4纸的像素尺寸
var b4_size = pageSizeInPixels("B4");
console.log("B4纸的像素尺寸:宽 " + b4_size.width + "px, 高 " + b4_size.height + "px");
相关推荐
dr李四维8 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_22 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~29 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ33 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z38 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式