fabric.js/test/visual/toDataURL.js

(function() {
  if (fabric.isLikelyNode) {
    if (process.env.launcher === 'Firefox') {
      fabric.browserShadowBlurConstant = 0.9;
    }
    if (process.env.launcher === 'Node') {
      fabric.browserShadowBlurConstant = 1;
    }
    if (process.env.launcher === 'Chrome') {
      fabric.browserShadowBlurConstant = 1.5;
    }
    if (process.env.launcher === 'Edge') {
      fabric.browserShadowBlurConstant = 1.75;
    }
  }
  else {
    if (navigator.userAgent.indexOf('Firefox') !== -1) {
      fabric.browserShadowBlurConstant = 0.9;
    }
    if (navigator.userAgent.indexOf('Chrome') !== -1) {
      fabric.browserShadowBlurConstant = 1.5;
    }
    if (navigator.userAgent.indexOf('Edge') !== -1) {
      fabric.browserShadowBlurConstant = 1.75;
    }
  }
  fabric.enableGLFiltering = false;
  fabric.isWebglSupported = false;
  fabric.Object.prototype.objectCaching = true;
  var visualTestLoop;
  if (fabric.isLikelyNode) {
    visualTestLoop = global.visualTestLoop;
  }
  else {
    visualTestLoop = window.visualTestLoop;
  }
  var fabricCanvas = this.canvas = new fabric.Canvas(null, {
    enableRetinaScaling: false, renderOnAddRemove: false, width: 200, height: 200,
  });

  var canvasWithObjects = '{"version":"2.4.6","objects":[{"type":"rect","version":"2.4.6","left":-8,"top":-11,"width":50,"height":50,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":50,"y2":0},"colorStops":[{"offset":0,"color":"rgb(109,67,57)","opacity":1},{"offset":1,"color":"rgb(51,167,218)","opacity":1}],"offsetX":0,"offsetY":0},"scaleX":16,"scaleY":12.18,"opacity":0.8},{"type":"circle","version":"2.4.6","left":13.11,"top":130.77,"width":100,"height":100,"fill":"#0ec6ba","scaleX":0.57,"scaleY":0.57,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"triangle","version":"2.4.6","left":361.54,"top":236.84,"width":50,"height":50,"fill":"#b99503","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"rect","version":"2.4.6","left":119.83,"top":97.98,"width":50,"height":50,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":0,"y2":50},"colorStops":[{"offset":0,"color":"rgb(12,101,114)","opacity":1},{"offset":1,"color":"rgb(206,164,109)","opacity":1}],"offsetX":0,"offsetY":0},"scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"polygon","version":"2.4.6","left":511.04,"top":115.36,"width":385,"height":245,"fill":{"type":"linear","coords":{"x1":0,"y1":0,"x2":385,"y2":0},"colorStops":[{"offset":0,"color":"rgb(151,164,232)","opacity":1},{"offset":1,"color":"rgb(68,30,248)","opacity":1}],"offsetX":0,"offsetY":0},"scaleX":0.49,"scaleY":0.49,"angle":-24.56,"points":[{"x":185,"y":0},{"x":250,"y":100},{"x":385,"y":170},{"x":0,"y":245}]},{"type":"line","version":"2.4.6","left":200.83,"top":101.84,"width":150,"height":100,"stroke":"#d11594","scaleX":0.46,"scaleY":0.46,"x1":-75,"x2":75,"y1":-50,"y2":50},{"type":"triangle","version":"2.4.6","left":178.97,"top":118.55,"width":50,"height":50,"fill":"#c560ff","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"circle","version":"2.4.6","left":508.12,"top":23.41,"width":100,"height":100,"fill":"#033516","scaleX":0.62,"scaleY":0.62,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"rect","version":"2.4.6","left":108.25,"top":267.7,"width":50,"height":50,"fill":"#ceada8","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"circle","version":"2.4.6","left":279.26,"top":124.34,"width":100,"height":100,"fill":"#439867","scaleX":0.52,"scaleY":0.52,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"triangle","version":"2.4.6","left":178.97,"top":213.7,"width":50,"height":50,"fill":"#a84956","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"line","version":"2.4.6","left":139.11,"top":162.27,"width":150,"height":100,"stroke":"#06150b","scaleX":0.49,"scaleY":0.49,"x1":-75,"x2":75,"y1":-50,"y2":50},{"type":"polygon","version":"2.4.6","left":464.73,"top":108.91,"width":385,"height":245,"fill":"#78ef2e","stroke":"#4ea2d7","strokeWidth":3,"scaleX":0.54,"scaleY":0.54,"angle":33.18,"opacity":0.84,"points":[{"x":185,"y":0},{"x":250,"y":100},{"x":385,"y":170},{"x":0,"y":245}]},{"type":"line","version":"2.4.6","left":217.54,"top":289.56,"width":150,"height":100,"stroke":"#636d31","scaleX":0.98,"scaleY":0.98,"x1":-75,"x2":75,"y1":-50,"y2":50},{"type":"triangle","version":"2.4.6","left":229.11,"top":162.27,"width":50,"height":50,"fill":"#21fdd6","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"circle","version":"2.4.6","left":6.68,"top":52.98,"width":100,"height":100,"fill":"#aff4ab","scaleX":0.38,"scaleY":0.38,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"rect","version":"2.4.6","left":434.83,"top":22.12,"width":50,"height":50,"fill":"#0004f0","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"circle","version":"2.4.6","left":509.4,"top":94.13,"width":100,"height":100,"fill":"#d3abcf","scaleX":0.65,"scaleY":0.65,"opacity":0.8,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"triangle","version":"2.4.6","left":105.68,"top":333.27,"width":50,"height":50,"fill":"#dd30e6","scaleX":1.29,"scaleY":1.29,"opacity":0.8},{"type":"line","version":"2.4.6","left":366.69,"top":209.9,"width":150,"height":100,"stroke":"#6f48ec","scaleX":0.98,"scaleY":0.98,"x1":-75,"x2":75,"y1":-50,"y2"

  var tests = [];

  function toDataURL1(canvas, callback) {
    var text = new fabric.Text('Hi i m an image',
      { strokeWidth: 2, stroke: 'red', fontSize: 60, objectCaching: false }
    );
    callback(text.toDataURL());
  }

  tests.push({
    test: 'Text to DataURL',
    code: toDataURL1,
    golden: 'dataurl1.png',
    newModule: 'DataURL exports',
    percentage: 0.09,
  });

  function toDataURL2(canvas, callback) {
    var text = new fabric.Text('Hi i m an image',
      { strokeWidth: 0, fontSize: 60, objectCaching: false }
    );
    var shadow = new fabric.Shadow({
      color: 'purple',
      offsetX: 0,
      offsetY: 0,
      blur: 6,
    });
    text.shadow = shadow;
    callback(text.toDataURL());
  }

  tests.push({
    test: 'Text to DataURL with shadow no offset',
    code: toDataURL2,
    golden: 'dataurl2.png',
    percentage: 0.09,
  });

  function toDataURL3(canvas, callback) {
    var text = new fabric.Text('Hi i m an image',
      { strokeWidth: 0, fontSize: 60, objectCaching: false }
    );
    var shadow = new fabric.Shadow({
      color: 'purple',
      offsetX: -30,
      offsetY: +40,
      blur: 10,
    });
    text.shadow = shadow;
    callback(text.toDataURL());
  }

  tests.push({
    test: 'Text to DataURL with shadow large offset',
    code: toDataURL3,
    golden: 'dataurl3.png',
    percentage: 0.09,
  });

  function toDataURL31(canvas, callback) {
    var text = new fabric.Text('Hi i m an image',
      { strokeWidth: 0, fontSize: 60, objectCaching: false, flipX: true }
    );
    fabricCanvas.setDimensions({ width: text.width, height: text.height });
    fabricCanvas.add(text);
    callback(fabricCanvas.toDataURL());
  }

  tests.push({
    test: 'a flipped text',
    code: toDataURL31,
    golden: 'dataurl31.png',
    percentage: 0.09,
  });

  function toDataURL4(canvas, callback) {
    fabricCanvas.setDimensions({ width: 800, height: 600 });
    fabricCanvas.loadFromJSON(canvasWithObjects, function() {
      callback(fabricCanvas.toDataURL());
    });
  }

  tests.push({
    test: 'Canvas toDataURL with objects',
    code: toDataURL4,
    golden: 'dataurl4.png',
    percentage: 0.09,
  });

  function toDataURL5(canvas, callback) {
    fabricCanvas.setDimensions({ width: 800, height: 600 });
    fabricCanvas.loadFromJSON(canvasWithObjects, function() {
      callback(fabricCanvas.toDataURL({ multiplier: 0.3 }));
    });
  }

  tests.push({
    test: 'Canvas toDataURL with objects and multiplier 0.3',
    code: toDataURL5,
    golden: 'dataurl5.png',
    percentage: 0.09,
  });

  function toDataURL6(canvas, callback) {
    // make so everything is smaller
    fabricCanvas.setDimensions({ width: 80, height: 60 });
    fabricCanvas.setZoom(0.1);
    fabricCanvas.loadFromJSON(canvasWithObjects, function() {
      callback(fabricCanvas.toDataURL({ multiplier: 4 }));
    });
  }

  tests.push({
    test: 'Canvas toDataURL with objects and multiplier 4',
    code: toDataURL6,
    golden: 'dataurl6.png',
    percentage: 0.09,
  });

  function toDataURL7(canvas, callback) {
    // make so everything is smaller
    fabricCanvas.setDimensions({ width: 80, height: 60 });
    fabricCanvas.setZoom(0.1);
    fabricCanvas.loadFromJSON(canvasWithObjects, function() {
      callback(fabricCanvas.toDataURL({ multiplier: 12, left: 20, top: 20, width: 20, height: 20 }));
    });
  }

  tests.push({
    test: 'Canvas toDataURL with objects and cropping and high multiplier',
    code: toDataURL7,
    golden: 'dataurl7.png',
    percentage: 0.09,
  });

  function toDataURL8(canvas, callback) {
    // make so everything is smaller
    fabricCanvas.setDimensions({ width: 800, height: 600 });
    fabricCanvas.loadFromJSON(canvasWithObjects, function() {
      callback(fabricCanvas.toDataURL({ multiplier: 1.2, left: 200, top: 200, width: 200, height: 200 }));
    });
  }

  tests.push({
    test: 'Canvas toDataURL with objects and cropping and high multiplier',
    code: toDataURL8,
    // use the same golden on purpose
    golden: 'dataurl7.png',
    percentage: 0.09,
  });

  function toDataURL9(canvas, callback) {
    // make so everything is smaller
    fabricCanvas.setDimensions({ width: 2400, height: 1800 });
    fabricCanvas.setZoom(3);
    fabricCanvas.loadFromJSON(canvasWithObjects, function() {
      callback(fabricCanvas.toDataURL({ multiplier: 0.4, left: 600, top: 600, width: 600, height: 600 }));
    });
  }

  tests.push({
    test: 'Canvas toDataURL with objects and cropping and small multiplier',
    code: toDataURL9,
    // use the same golden on purpose
    golden: 'dataurl7.png',
    percentage: 0.09,
  });

  function testWrapper(test) {
    var actualTest = test.code;
    test.code = function(canvas, callback) {
      actualTest(canvas, function(dataURL) {
        var img = fabric.document.createElement('img');
        var canvas = fabric.document.createElement('canvas');
        img.onload = function() {
          canvas.width = img.width;
          canvas.height = img.height;
          canvas.getContext('2d').drawImage(img, 0, 0);
          callback(canvas);
        };
        img.src = dataURL;
      });
    };
    visualTestLoop(fabricCanvas, QUnit)(test);
  }

  tests.forEach(testWrapper);
})();