在瀏覽器中使用PDFkit，從鏈接中插入圖片

Question

有沒有一種簡單的方法可以從url中獲取圖像並放入PDFKit pdf？

我有一個PDF在瀏覽器中自動生成。有一個我想要的圖像，我有一個URL。問題在於我在瀏覽器中生成PDF。由於我從互聯網上獲得URL，所以似乎應該有一種簡單的方法將該圖像轉換爲PDFKit可讀的內容。

有沒有一種方法可以將JavaScript圖像URL轉換爲PDFKit可讀的緩衝區？

我要的是你想什麼，下面的命令做的事：提前

doc.image('http://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg') 

感謝。我在網上找到的解決方案讓您的服務器接入鏈路，並用緩衝區進行響應。這是唯一的方法嗎？或者有沒有一種方法在瀏覽器中沒有http發佈？

Answer 1

我找回通過AJAX的圖像作爲base64編碼字符串，然後用下面的代碼base64編碼字符串轉換成可用的緩衝區：

var data = atob(base64); 
    var buffer = []; 
    for (var i = 0; i < data.length; ++i) 
     buffer.push(data.charCodeAt(i)); 
    buffer._isBuffer = true; 
    buffer.readUInt16BE = function(offset, noAssert) { 
     var len = this.length; 
     if (offset >= len) return; 

     var val = this[offset] << 8; 
     if (offset + 1 < len) 
      val |= this[offset + 1]; 
     return val; 
    }; 

    pdf.image(buffer); 

又見https://github.com/devongovett/pdfkit/issues/354#issuecomment-68666894，其中相同的問題被討論爲適用於字體。

Answer 2

這是一個很老的問題，但我會添加我的筆記，因爲這是在Google上查找「pdfkit瀏覽器圖像」時的第一個建議。

我根據我的數據URI選項supported by PDFKit解決方案：

只是傳遞的圖像路徑，緩衝區，或數據URI用base64編碼數據 到圖像的方法與一些可選參數一起。

因此，經過快速瀏覽後，我發現從圖像URL獲取數據URI的一般方法是使用畫布，like in this post。把他們放在一起PDFKit's interactive browser demo：

function getDataUri(url, callback) { 
    var image = new Image(); 

    image.crossOrigin = 'anonymous' 
    image.onload = function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size 
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size 

    canvas.getContext('2d').drawImage(this, 0, 0); 

    // // Get raw image data 
    // callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '')); 

    // ... or get as Data URI 
    callback(canvas.toDataURL('image/png')); 
    }; 

    image.src = url; 
} 

// Usage 
getDataUri('http://pdfkit.org/docs/img/14.png', function(dataUri) { 
    // create a document and pipe to a blob 
    var doc = new PDFDocument(); 
    var stream = doc.pipe(blobStream()); 

    doc.image(dataUri, 150, 200, { 
    width: 300 
    }); 

    // end and display the document in the iframe to the right 
    doc.end(); 
    stream.on('finish', function() { 
    iframe.src = stream.toBlobURL('application/pdf'); 
    }); 
}); 

Answer 3

我會權衡在這個問題上我的2美分，我只是花了很多時間一個很好的協議得到它的工作。這是我發現用Google搜索這個問題的一系列答案。

var doc = new PDFDocument(); 
var stream = doc.pipe(blobStream()); 

var files = { 
img1: { 
    url: 'http://upload.wikimedia.org/wikipedia/commons/0/0c/Cow_female_black_white.jpg', 
    } 
}; 

在一個地方使用上述對象來存儲PDF中需要的所有圖像和其他文件。

var filesLoaded = 0; 

//helper function to get 'files' object with base64 data 
function loadedFile(xhr) { 
    for (var file in files) { 
    if (files[file].url === xhr.responseURL) { 
     var unit8 = new Uint8Array(xhr.response); 
     var raw = String.fromCharCode.apply(null,unit8); 
     var b64=btoa(raw); 
     var dataURI="data:image/jpeg;base64,"+b64; 
     files[file].data = dataURI; 
    } 
} 
filesLoaded += 1; 

//Only create pdf after all files have been loaded 
if (filesLoaded == Object.keys(files).length) { 
    showPDF(); 
    } 
} 

//Initiate xhr requests 
for (var file in files) { 
    files[file].xhr = new XMLHttpRequest(); 
    files[file].xhr.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     loadedFile(this); 
    }  
    }; 

    files[file].xhr.responseType = 'arraybuffer'; 
    files[file].xhr.open('GET', files[file].url); 
    files[file].xhr.send(null); 
} 

function showPDF() { 
    doc.image(files.img1.data, 100, 200, {fit: [80, 80]}); 
    doc.end() 
} 

//IFFE that will download pdf on load 
var saveData = (function() { 
    var a = document.createElement("a"); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    return function (blob, fileName) { 
    var url = window.URL.createObjectURL(blob); 
    a.href = url; 
    a.download = fileName; 
    a.click(); 
    window.URL.revokeObjectURL(url); 
    }; 
}()); 

stream.on('finish', function() { 
    var blob = stream.toBlob('application/pdf'); 
    saveData(blob, 'aa.pdf'); 
}); 

我碰到漸漸從arraybuffer類型使用Base64數據串的信息的最大的問題。我希望這有幫助！

這裏是js fiddle其中大部分xhr代碼來自。