fabric.js/test/visual/toDataURL.js

231 lines
21 KiB
JavaScript
Raw Permalink Normal View History

(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);
})();