PDFKit:PNG 的未知图像格式错误
PDFKit: Unknown image format error for PNG
我在浏览器中使用 PDFKit 的预构建版本,在尝试添加 PNG 时出现以下错误:
Uncaught Error: Unknown image
PDFImage.open format.util.js:546
module.exports.image deflate.js:773
img.onload PDFrenderer.js:195
我正在服务器上将我的图像转换为 PNG(将它们裁剪成圆圈),服务器返回的图像的 mime 类型是 'image/png'。我不确定我用来将 PNG 转换为 ArrayBuffer 的方法是否不正确。
这是我用来获取 PNG 并将其转换为 ArrayBuffer 的代码:
var img = new Image, ctxData;
img.onError = function () {
throw new Error('Cannot load image: "' + url + '"');
}
img.onload = function () {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ctxData = canvas.toDataURL('image/png').slice('data:image/png;base64,'.length);
ctxData = atob(ctxData);
document.body.removeChild(canvas);
var buffer = [];
for (var i = 0, l = ctxData.length; i < l; i++) {
buffer.push(ctxData.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)
l |= this[offset + 1];
return val;
}
}
pdf.image(buffer);
}
img.src = url;
当此行从
更改时,这对 JPEG 效果很好
ctxData = canvas.toDataURL('image/png').slice('data:image/png;base64,'.length);
到
ctxData = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
但是我需要能够传入 PNG 文件,以便我可以将圆形图像放置在任何背景上。
我也尝试传递完整的 url(例如“http://mysite.dev/userimages/1234/roundavatar.png”),但是我收到以下错误:
Uncaught TypeError: undefined is not a function
PDFImage.open util.js:535
module.exports.image deflate.js:773
有没有人成功地通过浏览器将 PNG 添加到 PDFkit,如果有,您使用的是什么方法?
我找到了一个解决方案 https://github.com/devongovett/pdfkit/blob/master/lib/image.coffee 只要确保你的 png 文件的名称以大写结尾 .PNG,它对我有用。
我在浏览器中使用 PDFKit 的预构建版本,在尝试添加 PNG 时出现以下错误:
Uncaught Error: Unknown image
PDFImage.open format.util.js:546
module.exports.image deflate.js:773
img.onload PDFrenderer.js:195
我正在服务器上将我的图像转换为 PNG(将它们裁剪成圆圈),服务器返回的图像的 mime 类型是 'image/png'。我不确定我用来将 PNG 转换为 ArrayBuffer 的方法是否不正确。
这是我用来获取 PNG 并将其转换为 ArrayBuffer 的代码:
var img = new Image, ctxData;
img.onError = function () {
throw new Error('Cannot load image: "' + url + '"');
}
img.onload = function () {
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
ctxData = canvas.toDataURL('image/png').slice('data:image/png;base64,'.length);
ctxData = atob(ctxData);
document.body.removeChild(canvas);
var buffer = [];
for (var i = 0, l = ctxData.length; i < l; i++) {
buffer.push(ctxData.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)
l |= this[offset + 1];
return val;
}
}
pdf.image(buffer);
}
img.src = url;
当此行从
更改时,这对 JPEG 效果很好ctxData = canvas.toDataURL('image/png').slice('data:image/png;base64,'.length);
到
ctxData = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);
但是我需要能够传入 PNG 文件,以便我可以将圆形图像放置在任何背景上。
我也尝试传递完整的 url(例如“http://mysite.dev/userimages/1234/roundavatar.png”),但是我收到以下错误:
Uncaught TypeError: undefined is not a function
PDFImage.open util.js:535
module.exports.image deflate.js:773
有没有人成功地通过浏览器将 PNG 添加到 PDFkit,如果有,您使用的是什么方法?
我找到了一个解决方案 https://github.com/devongovett/pdfkit/blob/master/lib/image.coffee 只要确保你的 png 文件的名称以大写结尾 .PNG,它对我有用。