{"action":"created","issue":{"url":"https://api.github.com/repos/devongovett/pdfkit/issues/371","labels_url":"https://api.github.com/repos/devongovett/pdfkit/issues/371/labels{/name}","comments_url":"https://api.github.com/repos/devongovett/pdfkit/issues/371/comments","events_url":"https://api.github.com/repos/devongovett/pdfkit/issues/371/events","html_url":"https://github.com/devongovett/pdfkit/issues/371","id":57292138,"number":371,"title":"Unknown image format error when adding PNG ArrayBuffer","user":{"login":"bameyrick","id":8447446,"avatar_url":"https://avatars.githubusercontent.com/u/8447446?v=3","gravatar_id":"","url":"https://api.github.com/users/bameyrick","html_url":"https://github.com/bameyrick","followers_url":"https://api.github.com/users/bameyrick/followers","following_url":"https://api.github.com/users/bameyrick/following{/other_user}","gists_url":"https://api.github.com/users/bameyrick/gists{/gist_id}","starred_url":"https://api.github.com/users/bameyrick/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bameyrick/subscriptions","organizations_url":"https://api.github.com/users/bameyrick/orgs","repos_url":"https://api.github.com/users/bameyrick/repos","events_url":"https://api.github.com/users/bameyrick/events{/privacy}","received_events_url":"https://api.github.com/users/bameyrick/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-02-11T09:18:56Z","updated_at":"2015-11-17T18:31:02Z","closed_at":"2015-02-21T05:19:43Z","body":"I'm using the prebuilt version of PDFKit in the browser, and when attempting to add a PNG I get the following error:\r\n\r\n```javascript\r\nUncaught Error: Unknown image                        \r\n    PDFImage.open                                               format.util.js:546\r\n    module.exports.image                                        deflate.js:773 \r\n    img.onload                                                  PDFrenderer.js:195\r\n```\r\n\r\nI'm converting my images to PNG on the server (to crop them into circles) and the mime type of the images returned by the server is 'image/png'.  I'm unsure whether the method I'm using to convert the PNG into an ArrayBuffer is incorrect.\r\n\r\nHere is the code I use to fetch the PNG and convert it  into an ArrayBuffer:\r\n\r\n```javascript\r\nvar img = new Image, ctxData;\r\n\r\nimg.onError = function () {\r\n    throw new Error('Cannot load image: \"' + url + '\"');\r\n}\r\n\r\nimg.onload = function () {\r\n    var canvas = document.createElement('canvas');\r\n    document.body.appendChild(canvas);\r\n    canvas.width = img.width;\r\n    canvas.height = img.height;\r\n\r\n    var ctx = canvas.getContext('2d');\r\n    ctx.drawImage(img, 0, 0);\r\n    ctxData = canvas.toDataURL('image/png').slice('data:image/png;base64,'.length);\r\n    ctxData = atob(ctxData);\r\n    document.body.removeChild(canvas);\r\n\r\n    var buffer = [];\r\n\r\n    for (var i = 0, l = ctxData.length; i < l; i++) {\r\n        buffer.push(ctxData.charCodeAt(i));\r\n        buffer._isBuffer = true;\r\n        buffer.readUInt16BE = function (offset, noAssert) {\r\n            var len = this.length;\r\n            if (offset >= len) return;\r\n\r\n            var val = this[offset] << 8;\r\n            if (offset + 1 < len)\r\n                val |= this[offset + 1];\r\n            return val;\r\n        }\r\n    }\r\n    pdf.image(buffer);\r\n}\r\n\r\nimg.src = url;\r\n```\r\n\r\nThis works fine for JPEGs when this line is changed from\r\n```javascript\r\nctxData = canvas.toDataURL('image/png').slice('data:image/png;base64,'.length);\r\n```\r\nto\r\n```javascript\r\nctxData = canvas.toDataURL('image/jpeg').slice('data:image/jpeg;base64,'.length);\r\n```\r\nhowever I need to be able to pass in PNGs so that I can place I can place round images over any background.\r\n\r\nI've also tried passing in the full url (e.g. 'http://mysite.dev/userimages/1234/roundavatar.png'), however I'm then presented with the following error:\r\n\r\n```javascript\r\nUncaught TypeError: undefined is not a function\r\n    PDFImage.open                 util.js:535\r\n    module.exports.image          deflate.js:773\r\n```\r\n\r\nHope this is just something I've been doing wrong, and thanks for the great library!"},"comment":{"url":"https://api.github.com/repos/devongovett/pdfkit/issues/comments/157461636","html_url":"https://github.com/devongovett/pdfkit/issues/371#issuecomment-157461636","issue_url":"https://api.github.com/repos/devongovett/pdfkit/issues/371","id":157461636,"user":{"login":"mattblang","id":1845257,"avatar_url":"https://avatars.githubusercontent.com/u/1845257?v=3","gravatar_id":"","url":"https://api.github.com/users/mattblang","html_url":"https://github.com/mattblang","followers_url":"https://api.github.com/users/mattblang/followers","following_url":"https://api.github.com/users/mattblang/following{/other_user}","gists_url":"https://api.github.com/users/mattblang/gists{/gist_id}","starred_url":"https://api.github.com/users/mattblang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattblang/subscriptions","organizations_url":"https://api.github.com/users/mattblang/orgs","repos_url":"https://api.github.com/users/mattblang/repos","events_url":"https://api.github.com/users/mattblang/events{/privacy}","received_events_url":"https://api.github.com/users/mattblang/received_events","type":"User","site_admin":false},"created_at":"2015-11-17T18:31:02Z","updated_at":"2015-11-17T18:31:02Z","body":"@Janneman84 I think this workaround causes an issue when trying to use multiple images, due to how it is pulling from the ImageRegistry in [image()](https://github.com/devongovett/pdfkit/blob/master/lib/mixins/images.coffee) when `isBuffer` returns false."}}