| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87 | 1×
1×
1×
1×
1×
9×
9×
9×
9×
9×
9×
9×
9×
2×
7×
2×
9×
9×
9×
2×
1×
1×
7×
7×
7×
7×
7×
7×
5×
2×
1×
1×
1×
7×
9×
1×
1667×
1×
1×
6×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ImageExport = (function () {
function ImageExport(control) {
}
ImageExport.prototype.export = function (gauge, type, fileName, allowDownload) {
var _this = this;
var promise = new Promise(function (resolve, reject) {
var isDownload = !(ej2_base_1.Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
var element = ej2_base_1.createElement('canvas', {
id: 'ej2-canvas',
attrs: {
'width': gauge.availableSize.width.toString(),
'height': gauge.availableSize.height.toString()
}
});
var exportElement = gauge.svgObject.cloneNode(true);
var backgroundElement = exportElement.childNodes[0];
var backgroundColor = backgroundElement.getAttribute('fill');
if ((gauge.theme === 'Tailwind' || gauge.theme === 'Bootstrap5' || gauge.theme === 'Fluent' || gauge.theme === 'Material3' ||
gauge.theme === 'Fluent2')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
}
else if ((gauge.theme === 'TailwindDark' || gauge.theme === 'Bootstrap5Dark' || gauge.theme === 'FluentDark' || gauge.theme === 'Material3Dark' ||
gauge.theme === 'Fluent2Dark' || gauge.theme === 'Fluent2HighContrast')
&& (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
}
var svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
exportElement.outerHTML +
'</svg>';
var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
[(new XMLSerializer()).serializeToString(exportElement)], { type: 'image/svg+xml' }));
if (type === 'SVG') {
if (allowDownload) {
_this.triggerDownload(fileName, type, url, isDownload);
}
else {
resolve(null);
}
}
else {
var image_1 = new Image();
var context_1 = element.getContext('2d');
image_1.onload = (function () {
context_1.drawImage(image_1, 0, 0);
window.URL.revokeObjectURL(url);
if (allowDownload) {
_this.triggerDownload(fileName, type, element.toDataURL('image/png').replace('image/png', 'image/octet-stream'), isDownload);
}
else {
if (type === 'JPEG') {
resolve(element.toDataURL('image/jpeg'));
}
else Eif (type === 'PNG') {
resolve(element.toDataURL('image/png'));
}
}
});
image_1.src = url;
}
});
return promise;
};
ImageExport.prototype.getModuleName = function () {
return 'ImageExport';
};
ImageExport.prototype.destroy = function () { };
ImageExport.prototype.triggerDownload = function (fileName, type, url, isDownload) {
ej2_base_1.createElement('a', {
attrs: {
'download': fileName + '.' + type.toLocaleLowerCase(),
'href': url
}
}).dispatchEvent(new MouseEvent(isDownload ? 'click' : 'move', {
view: window,
bubbles: false,
cancelable: true
}));
};
return ImageExport;
}());
exports.ImageExport = ImageExport;
});
|