2015-05-01 5 views
0

я в настоящее время загрузки Google Charts, как детские со следующим кодом:Загрузить Google Chart как jpeg вместо png?

var imgUri = my_chart.getImageURI(); 
var url = window.URL || window.webkitURL; 
linkPNG = document.createElement("a"); 
linkPNG.href = imgUri; 
linkPNG.download = title+".png"; 
link.click(); 

Он отлично работает. К сожалению, мои пользователи нуждаются в формате JPEG, а не в формате PNG, и мой обычный

var imgURL = my_chart.toDataURL("image/jpeg"); 

не похоже на работу с Google Charts. Как загрузить диаграммы как .jpg вместо .png?

+0

Документация MDN api имеет хороший пример для преобразования изображений. Вам просто нужно немного изменить код. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL – SpiderPig

ответ

1

Проведя некоторое время, просматривая запутанный источник библиотеки визуализации, я решил, что было бы проще просто воссоздать изображение из URI данных, а не пытаться изменить исходный тип экспорта. Вы можете загрузить URI данных с изображением, нарисовать его на холсте и преобразовать его обратно в URI данных.

var img = new Image(); 
img.addEventListener('load', function() { 
    var canvas = document.createElement('canvas'); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = 'white'; 
    ctx.fillRect(0, 0, img.width, img.height); 
    ctx.drawImage(img, 0, 0); 
    var link = document.createElement('a'); 
    link.href = canvas.toDataURL('image/jpeg'); 
    link.download = title + '.jpg'; 
    link.click(); 
}); 
img.src = my_chart.getImageURI(); 

Некоторая обработка ошибок, вероятно, тоже будет плохой идеей.

+0

Я как раз собирался сказать, что вам нужно выбрать контекст canvas 2d вместо рисования непосредственно на холсте, а затем вы отредактировал его в самый последний момент. Это отлично работает. Единственное, что я добавил бы, это то, что из-за проблем с прозрачностью я добавил 'ctx.fillStyle =" # FFFFFF "; ctx.fillRect (0,0, canvas.width, canvas.height); 'before' ctx.drawImage (img, 0,0) ' – BarthesSimpson

+0

Также вам нужно изменить' link.download = title + '.png'; 'to' link.download = title + '.jpg'; ' – BarthesSimpson

+0

А, хорошие моменты. Я действительно писал код холста для моего проекта, когда понял, что забыл рисовать в контексте в своем ответе, который я написал вчера, поэтому вернулся, чтобы исправить это. Какое совпадение. – trumank

Смежные вопросы