Results 1 to 3 of 3

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default Charts - downloading of chart image is not working in IE8 because of canvas.toDataURL

    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():
    Code:
        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():
    Code:
        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

    Code:
        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
    flatten-canvas-error.jpg


    This issue is actual for both ExtJS5 and ExtJS6

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report. This is a known issue:
    https://www.sencha.com/forum/showthread.php?284486

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    10

    Default

    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.

Similar Threads

  1. placeholder image while real image downloading
    By bastard in forum Sencha Touch 2.x: Q&A
    Replies: 6
    Last Post: 6 Jul 2013, 9:13 PM
  2. How to save picture from canvas.toDataURL() to iOS's photo stream?
    By Ethan Long in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 16 Apr 2012, 1:48 AM
  3. Replies: 16
    Last Post: 16 Feb 2012, 4:35 PM
  4. Reg. downloading image from server
    By After2050 in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 24 Jun 2010, 8:47 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •