本文要推薦的[ToolFk]是一款程式設計師經常使用的線上免費測試工具箱，ToolFk 特色是專注於程式設計師日常的開發工具，不用安裝任何軟體，只要把內容貼上按一個執行按鈕,就能獲取到想要的內容結果。ToolFk還支援  BarCode條形碼線上生成、 QueryList採集器、 PHP程式碼線上執行、 PHP混淆、加密、解密、 Python程式碼線上執行、JavaScript線上執行、YAML格式化工具、HTTP模擬查詢工具、HTML線上工具箱、JavaScript線上工具箱、CSS線上工具箱、JSON線上工具箱

網站名稱：ToolFk
網站鏈結：https://www.toolfk.com/
工具連結：https://www.toolfk.com/tool-convert-pdf

程式碼教學

本工具[Online PDF to image tool, support online PDF to PNG, PDF to JPEG, PDF to WEBP, PDF to TXT - toolfk程式設計師線上工具網]依賴https://xxlllq.github.io/pdf2img/庫

STEP 1

STEP 2

核心程式碼如下

<script>
    $("#export").attr("disabled", "disabled");
    var pdfFile;
    var txtArr =[];
    $('#pdf').change(function() {
        var load_index = layer.load();
        var pdfFileURL = $('#pdf').val();
        if(pdfFileURL) {
            $("#imgDiv").empty();
            var files = $('#pdf').prop('files');
            var fileSize = files[0].size;
            var mb;
            if(fileSize) {
                mb = fileSize / 1048576;
            }

            $("#export").removeAttr("disabled", "disabled");
            $("#pdfName").text(files[0].name).attr("title",files[0].name);
            $("#sizeText").text(mb.toFixed(2) + "Mb");

            /*pdf.js無法直接開啟本地檔案,所以利用FileReader轉換*/
            var reader = new FileReader();
            reader.readAsArrayBuffer(files[0]);
            var load_inner = layer.load();
            reader.onload = function(e) {
                var typedarray = new Uint8Array(this.result);
                PDFJS.getDocument(typedarray).then(function(pdf) {
                    $("#imgDiv").css("border", "0");
                    if(pdf) {
                        var pageNum = pdf.numPages;
                        $("#pagesText").text(pageNum);

                        for(var i = 1; i <= pageNum; i++) {
                            var canvas = document.createElement('canvas');
                            canvas.id = "pageNum" + i;
                            $("#imgDiv").append(canvas);
                            var context = canvas.getContext('2d');
                            openPage(pdf, i, context);
                        }
                    }
                    layer.close(load_inner);
                });
            };
        }
        layer.close(load_index);

    });

    function wt(wmContext,origCanvas){
        wmContext.save();
        wmContext.globalAlpha=0.5;
        wmContext.textBaseline = 'middle';
        wmContext.textAlign = 'center';
        wmContext.font = "18px Comic Sans MS" ;
        wmContext.fillStyle = "red";
        wmContext.rotate(180*Math.PI/180);
        wmContext.fillText("WaterMark Demo",200,60);
        wmContext.restore();
    }

    function openPage(pdfFile, pageNumber, context) {
        var scale = 2;

        pdfFile.getPage(pageNumber).then(function(page) {

            page.getTextContent().then((textContent) => {
                let pageText = [];
                textContent.items.forEach((textItem) => {
                    pageText.push(textItem.str);
                });
                pageText.join(' ');
                txtArr[pageNumber] = pageText;
            });


            viewport = page.getViewport(scale);
            var canvas = context.canvas;
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = "96%";
            canvas.style.height = "100%";
            canvas.className = 'c_class';

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);

        });
    };

    function exportType(images,ext,url_ext){
        $("canvas").each(function(index, ele) {
            var canvas = document.getElementById("pageNum" + (index + 1));
            images.file("image-" + (index + 1) + ext, dataURLtoBlob(canvas.toDataURL(url_ext, 1.0)), {
                base64: true
            });
        });
    }

    $("#export").click(function() {
        var modules     =   $("#modules");
        var pdfFileURL = $('#pdf').val();
        if(!pdfFileURL){
            layer.msg("@lang('toolfk.lang_convert_pdf_upload').");
            return false;
        }

        var module_val  =   modules.val();
        if(!module_val){
            layer.msg("@lang('toolfk.lang_convert_pdf_convert').");
            return false;
        }

        var zip = new JSZip();
        var images = zip.folder("toolfk-images");

        if(module_val == "png"){
            exportType(images,".png","image/png");
        }else if(module_val == "jpeg"){
            exportType(images,".jpeg","image/jpeg");
        }else if(module_val == "webp"){
            exportType(images,".webp","image/webp");
        }else if(module_val == "txt"){
            var fullTxt = "";
            $.each(txtArr,function(index,ele){
                if (typeof(ele) != "undefined"){
                    fullTxt+=ele;
                }
            });
            images.file($("#pdfName").text() + ".txt",""+fullTxt);
        }else{
            layer.msg("@lang('toolfk.lang_convert_pdf_convert').");
            return false;
        }
        zip.generateAsync({
            type: "blob"
        }).then(function(content) {
            saveAs(content, "toolfk_com_pdf_convert.zip");
        });
    });


    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while(n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });
    }
</script>

值得一試的三個理由：

1. 整合各種程式設計師開發中經常使用的開發測試工具。

2. 簡潔美觀大氣的網站頁面

3. 支援 線上格式化執行程式碼、APK線上反編譯、線上高強度密碼生成、線上網頁截圖 等二十多種工具服務

4. 同時還推薦一下它的姐妹網 www.videofk.com 視訊下載工具箱 

本文連結：http://www.hihubs.com/article/400