现在有一个A4的横版图片,如何在打印的时候旋转成竖版的图片? 头像 小数点

Viewed 4

现在有一个A4的横版图片,如何在打印的时候旋转成竖版的图片?

2 Answers

解决思路: 图片 -> pdf -> 旋转 -> 图片

import {jsPDF} from 'jspdf';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/build/pdf.worker.mjs';
const imgUrl = '需要旋转的图片url';

// 1. 加载图片
const img = await loadImage(imgUrl);

// 2. 转换为PDF
const pdfBlob = await imageToPdf(img);

// 3. 旋转pdf转为图片blob
const imageBlob = await convertPdfToImageBlob(pdfBlob);

// 4. 转为图片地址
const imageUrl = URL.createObjectURL(imageBlob);
const loadImage = (url) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
};
const imageToPdf = (img) => {
return new Promise((resolve) => {
const pdf = new jsPDF({
orientation: img.width > img.height ? 'landscape' : 'portrait',
unit: 'px',
format: [img.width, img.height],
margins: {
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});

    pdf.addImage(img, 'JPEG', 0, 0, img.width, img.height);
    const pdfBlob = pdf.output('blob');
    resolve(pdfBlob);
});

};
const convertPdfToImageBlob = async (file) => {
const pdf = await pdfjsLib.getDocument(URL.createObjectURL(file)).promise;
const page = await pdf.getPage(1);

const viewport = page.getViewport({
    scale: 1.0,
    rotation: -90,
    offsetX: 0,
    offsetY: 0,
});
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
    canvasContext: context,
    viewport: viewport,
    intent: 'print',
};
await page.render(renderContext).promise;
return new Promise((resolve) => {
    canvas.toBlob((blob) => {
        resolve(blob);
    }, 'image/png');
});

};