Support BMP Image format

[tangzicheng]

./has_lib.sh jpeg
true
./has_lib.sh gif
true

Issue or Feature

/root/node-v6.10.3-linux-armv7l/lib/node_modules/fabric/dist/fabric.js:18598
elementToDraw && ctx.drawImage(elementToDraw,
^

Error: Image given has not completed loading
at Error (native)

Steps to Reproduce

var fs = require('fs');
var fabric = require('fabric').fabric;

function save(canvas) {
  var out = fs.createWriteStream(__dirname + '/test.png');
  var stream = canvas.createPNGStream();
    stream.on('data', function(chunk) {
      out.write(chunk);
  });
  stream.on('end', function() {
      out.end();                      
  });
}


var json = '{"objects":[{"type":"image","originX":"left","originY":"top","left":5,"top":5,"width":0,"height":0,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockMovementX":false,"lockMovementY":false,"src":"data:image/jpg;base64,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","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":5,"top":5,"width":111,"height":72,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockMovementX":false,"lockMovementY":false,"src":"data:image/bmp;base64,Qk2+BAAAAAAAAD4AAAAoAAAAbwAAAEgAAAABAAEAAAAAAIAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///wD//////////////////gAA//////////////////4AAP/////////////////+AAD//////////////////gAA//////////////////4AAP/////////////////+AAD//////////////////gAA//////////////////4AAP/////////////////+AAD//////////////////gAA//////////////////4AAP/////////////////+AAD//////////////////gAA//////////////////4AAP/////////////////+AAD///+AAAAAAAAD/////gAA////AAAAAAAAA/////4AAP///wAAAAAAAAH////+AAD///8AAAAAAAAB/////gAA////AAAAAAAAAf////4AAP///wAAAAAAAAH////+AAD///8AAAAAAAAB/////gAA////AAAAAAAAAf////4AAP///wAAAAAAAAH////+AAD///8AAAAAAAAB/////gAA////AAAAAAAAAf////4AAP///wAAAAAAAAH////+AAD///8AADg4MAAB/////gAA////AAA8eHgAAf////4AAP///4AAODh4AAP////+AAD///+AABAQIAAH/////gAA////wAAAAAAAB/////4AAP///+AAAAAAAA/////+AAD////gABgwMAAf/////gAA////8AA4OHgAH/////4AAP////gAPDh4AD/////+AAD////4ABgwMAB//////gAA/////AAAAAAAf/////4AAP////4AAAAAAP/////+AAD/////AAAAAAH//////gAA/////wA4OHAD//////4AAP///gOAPHh4A//////+AAD///gAwDg4cAcAH////gAA///wAOAAAAAPAA////4AAP//4ABwAAAAHgAH///+AAD//+AAcAAAAD4AB////gAA//////gAAAA///////4AAP//8AD8AAAAfwAH///+AAD//+AAfAf/wH4AB////gAA///gAHwP/8B+AAf///4AAP//4AB8D//AfgAH///+AAD///AAfA//4PwAD////gAA///wAD/////8AA////4AAP//8AA//////AAP///+AAD///gAH/////gAD////gAA///4AA/////4AB////4AAP//+AAH////8AAf///+AAD///wAA////8AAP////gAA///8AAB///4AAD////4AAP///gAAAAAAAAB////+AAD///8AAAAAAAAA/////gAA////gAAAAAAAAf////4AAP///8AAAAAAAAP////+AAD////gAAAAAAAH/////gAA////8AAAAAAAD/////4AAP////wAAAAAAD/////+AAD/////gAAAAAH//////gAA//////gAAAAf//////4AAP//////8AAP///////+AAD//////////////////gAA//////////////////4AAP/////////////////+AAA=","filters":[],"resizeFilters":[]}],"background":"white"}';

var canvas = fabric.createCanvasForNode(600, 448)
var ctx = canvas.getContext('2d');
ctx.antialias = 'none';
ctx.imageSmoothingEnabled = false;

canvas.loadFromJSON(json, function() {
});
console.log('ok');
save(canvas);

// etc.

Your Environment

• Version of node-canvas (1.6.6):
• Environment (node 6.10.3 on Ubuntu 16.04):

[LinusU]

It seems like this is a bug in fabric, maybe they need to wait for .onload to fire somewhere 🤔

Would you mind raising an issue with them as well?

[alecmev]

@tangzicheng I see you have an image/bmp in there, which, it appears, isn't supported.

[zbjornson]

Good find @jeremejevs. I changed the title to reflect that.

According to MDN:

The HTML standard doesn't give a list of image formats that must be supported, so each user agent supports a different set of formats.

The image formats supported by Firefox are:

• JPEG
• GIF, including animated GIFs
• PNG
• APNG
• SVG
• BMP
• BMP ICO
• PNG ICO