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

Question

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

Answer 1

解决思路： 图片 -> 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');
    });
};

Answer 2

需求我都没搞明白，别人已经把代码都写完了