专栏首页oktoolsPDF转图片,在线PDF转JPG/PNG
原创

PDF转图片,在线PDF转JPG/PNG

在线DEMO

原理

使用pdf.js预览图片,pdf.js将pdf通过canvas将每一页渲染出来,然后我们通过canvas的toDataURL方法保存为jpg或png格式。

pdf.js是Mozilla开源的一个js库,无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。

依赖

需要pdf.min.jspdf.worker.min.js两个js文件

全部代码实现

 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcss.com/pdf.js/2.2.228/pdf.worker.min.js';

    const preview = document.getElementById('preview');
    const page_num = document.getElementById('page_num');
    const out_type = document.getElementById('out_type');

    let pdfFile, pdf, pageNum, context = preview.getContext('2d');

    out_type.querySelectorAll('.button').forEach(function (btn) {
        btn.onclick = function () {
            out_type.querySelector('.primary').classList.remove('primary');
            btn.classList.add('primary');
        }
    });

	// 加载PDF文件
    function loadPDF(file) {
        pdfFile = file;
        file_name.innerHTML = file.name;

        let reader = new FileReader();
        reader.onload = (e) => showPDF(e.target.result);
        reader.readAsDataURL(file);
    }

	// 预览PDF
    function showPDF(url) {
        let loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then(function (doc) {
            pdf = doc;
            pageNum = 1;
            preview.hidden = false;
            readerPage()
        }, function (reason) {
            alert(reason)
        });
    }

	// 预览上一页
    function prevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        readerPage()
    }

	//预览下一页
    function nextPage() {
        if (pageNum >= pdf.numPages) {
            return;
        }
        pageNum++;
        readerPage()
    }
	
	//渲染页面
    function readerPage(callback) {
        pdf.getPage(pageNum).then(function (page) {
            let scale = 1.5;
            let viewport = page.getViewport({scale: scale});

            preview.height = viewport.height;
            preview.width = viewport.width;

            let renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext).promise.then(callback);
        });
        page_num.innerText = `页码 : ${pageNum} / ${pdf.numPages}`;
    }

	// 保存当前页
    function save() {
        let a = document.createElement('a');
        let event = new MouseEvent('click');
        let type = out_type.querySelector('.primary').innerText.toLowerCase();
        a.download = pdfFile.name + '-' + pageNum + '.' + type;
        a.href = preview.toDataURL(type === 'png' ? 'image/png' : 'image/jpeg');
        a.dispatchEvent(event)
    }

	//保存全部页面
    function saveAll() {
        pageNum = 1;
        savePage()
    }

    function savePage() {
        if (pageNum > pdf.numPages) {
            alert('全部保存成功');
            return
        }

        readerPage(function () {
            save();
            pageNum++;
            savePage();
        });
    }

预览:

image

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在线图片压缩,JS实现图片压缩功能

    vivec
  • 在线Base64编码/解码

    vivec
  • Unicode转中文,Unicode编码转换,ASCII转Unicode,Unicode转ASCII

    vivec
  • Solidity 教程系列3 - 函数类型

    Solidity 是以太坊智能合约编程语言,阅读本文前,你应该对以太坊、智能合约有所了解,如果你还不了解,建议你先看以太坊是什么

    Tiny熊
  • 剑指offer(47-67题)终极篇

    思路: 这题首先要理解题意吧。题目就是给了两个操作,insert和FirstAppearingOnce两个函数,至于一些其他需要你自己实现。你可以选择字符数组、...

    bigsai
  • 迄今最大公开语音数据集上线,汉语部分还不够强,需要你来帮忙

    今天,Mozilla发布了迄今为止最大的公开语音数据集Common Voice,内容全部来自志愿者的贡献。它的总时长达到了1368小时,包含18种语言,其中也有...

    量子位
  • Python--文件操作

    a模式,文件不存在则创建,文件存在则不会覆盖,写内容会以追加的方式写(写日志文件的时候常用),追加模式是一种特殊的写模式

    py3study
  • 小程序获取时间格式

    达达前端
  • 人工智能胶囊系统以最先进的精度区分物体

    强有力的证据表明,人类总是依靠坐标系或参考线和曲线来推测空间中点的位置。这与广泛使用的计算机视觉算法不同,后者往往通过物体特征的数字表示来区分物体。为了寻求一种...

    AiTechYun
  • PAT (Basic Level) Practice (中文)1026 程序运行时间

    要获得一个 C 语言程序的运行时间,常用的方法是调用头文件 time.h,其中提供了 clock() 函数,可以捕捉从程序开始运行到 clock() 被调用时所...

    C you again 的博客

扫码关注云+社区

领取腾讯云代金券