PDA

View Full Version : Charts - downloading of chart image is not working in IE8 because of canvas.toDataURL



nahab
30 Jun 2015, 6:23 AM
Hi

Recently found that it is impossible to download image of chart under IE8.

The root problem is that Ext.draw.engine.Canvas.flatten() method doesn't use G_vmlCanvasManager.initElement() as it done in Ext.draw.engine.Canvas.createCanvas()

createCanvas():


createCanvas: function () {
var canvas = Ext.Element.create({
tag: 'canvas',
cls: Ext.baseCSSPrefix + 'surface-canvas'
});


// Emulate Canvas in IE8 with VML.
window['G_vmlCanvasManager'] && G_vmlCanvasManager.initElement(canvas.dom);


var overrides = Ext.draw.engine.Canvas.contextOverrides,
ctx = canvas.dom.getContext('2d'),


flatten():


flatten: function (size, surfaces) {
var canvas = document.createElement('canvas'),
className = Ext.getClassName(this),
ratio = this.devicePixelRatio,
ctx = canvas.getContext('2d'),


But even if fix this problem then we will have problem at the Return statement


flatten: function (size, surfaces) {
var canvas = document.createElement('canvas'),
className = Ext.getClassName(this),
ratio = this.devicePixelRatio,
surface, rect, i;

// Emulate Canvas in IE8 with VML.
window['G_vmlCanvasManager'] && G_vmlCanvasManager.initElement(canvas);

var ctx = canvas.getContext('2d');


canvas.width = Math.ceil(size.width * ratio);
canvas.height = Math.ceil(size.height * ratio);


for (i = 0; i < surfaces.length; i++) {
surface = surfaces[i];
if (Ext.getClassName(surface) !== className) {
continue;
}
rect = surface.getRect();
ctx.drawImage(surface.canvases[0].dom, rect[0] * ratio, rect[1] * ratio);
}
return {
data: canvas.toDataURL(),
type: 'png'
};
},

It will fail with below error
52762


This issue is actual for both ExtJS5 and ExtJS6

Gary Schlosberg
30 Jun 2015, 6:39 AM
Thanks for the report. This is a known issue:
https://www.sencha.com/forum/showthread.php?284486

nahab
30 Jun 2015, 7:33 AM
So, no plans to fix this?


Any workarounds proposed? For now I see only one solution to switch back to legacy Charts (ext-charts) - it works in IE8. Yet not sure will it works in ExtJS6.