canvas - new - Renderizar lienzo de Highcharts como PNG en la página

highcharts events

Question

De vuelta a este maravilloso pozo nuevamente ...

Estoy usando la biblioteca HighCharts para generar algunos gráficos dinámicos. Sin embargo, me gustaría representar el elemento canvas de HighCharts como una imagen PNG, de forma que el usuario pueda copiar y pegar el gráfico en un correo electrónico, etc. sin tener que usar la función de exportación.

Específicamente, intento crear una plantilla de correo electrónico HTML que incluya el gráfico, y quiero que el usuario pueda seleccionar todo> copiar / pegar en su cliente de correo electrónico en lugar de copiar / pegar, exportar la imagen, y luego encontrar un forma de insertarlo en el correo electrónico.

He encontrado esto: Capture HTML Canvas como gif / jpg / png / pdf? , pero el código no parece representar una imagen en el documento.

Muchas gracias por cualquier ayuda.

Answer 1

Sé que esto es ahora una vieja pregunta, pero dado que salió # 1 para mí en un resultado de búsqueda de Google, creo que vale la pena mencionar que Highcharts ahora admite de forma nativa un script de generación de imágenes del lado del servidor y funciona muy bien.

Answer 2

Aquí hay un truco si está listo para usar HighCharts. Utiliza canvg para analizar el SVG en un lienzo y luego convierte el lienzo en PNG.

chart = new Highcharts.Chart({
    
    chart: {
        renderTo: ''container''
    },
    
    title: {
        text: ''''
    },
    
    xAxis: {
        categories: [''Jan'', ''Feb'', ''Mar'', ''Apr'', ''May'', ''Jun'', ''Jul'', ''Aug'', ''Sep'', ''Oct'', ''Nov'', ''Dec'']
    },
    
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],
    
    navigation: {
        buttonOptions: {
            align: ''center''
        }
    }
});

canvg(document.getElementById(''canvas''), chart.getSVG())
    
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

document.write(''<img src="''+img+''"/>'');

Answer 3

Aquí hay una solución de servidor basada en PhantomJS. Puede usar JSONP para realizar una llamada de dominio cruzado a image.vida.io.

http://image.vida.io/

Su cuadro / visualización debe ser accesible desde el exterior. Puede pasar credenciales a la URL.

http://image.vida.io/api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas

Luego puedes mostrar la imagen con la etiqueta img:

<img src="data:image/png;base64, [base64 data]"/>

Funciona a través del navegador.

Answer 4

Con la información de " Gráficos de renderizado en el servidor " (de la respuesta jkraybills ), he creado este ejemplo mínimo usando un Ajax para obtener una imagen de un gráfico que no se ha renderizado y mostrándolo en un img -tag.

HTML:

<img id="chart" style="width: 600px;" />

Javascript:

// Regular chart options
var options = {
    title: {
        text: ''My chart''
    }
    ...
}

//URL to Highcharts export server
var exportUrl = ''http://export.highcharts.com/'';

//POST parameter for Highcharts export server
var object = {
    options: JSON.stringify(options),
    type: ''image/png'',
    async: true
};

//Ajax request
$.ajax({
    type: ''post'',
    url: exportUrl,
    data: object,
    success: function (data) {
        // Update "src" attribute with received image URL
        $(''#chart'').attr(''src'', exportUrl + data);
    }
});

Como en esta demostración de JSFiddle .

El resto del parámetro POST ( width , callback ...) se encuentra en la documentación .