pdf canvas php html5 javascript
2 ответа
Берете полученный png отправляете на сервер с php, там используете любой генератор pdf для php(например) для вставки картинки в pdf, сохраняете pdf на диск и даете как ответ ссылку на pdf. Изменение mime-type на другой не конвертирует png в pdf =)
PS Я думаю вам стоит заморочится, судя по всему опыта у вас не много, а он вам нужен.
Как вариант это легко можно сделать и на стороне клиента силами JS.
Для этого :
- из канваса создаем картинку (или даже массив картинок чтобы потом сделать многостраничный PDF)
- рендерим картинки в PDF файл c помощью jsPDF
- сохраняем его на сервер или отправляем пользователю
//Эта часть кода просто инициализирует канвас для наглядности
document.addEventListener("DOMContentLoaded", function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 300);
});
function Convert() {
//По нажатию на кнопку получаем канвас
var canvas = document.getElementById('myCanvas');
// И создаем из него картиику в base64
var quality = 1; // качество от 0 до 1, заодно и сжать можно
var myImage = {
data: canvas.toDataURL('image/jpeg', quality),
height: canvas.height,
width: canvas.width
};
// теперь из картинки делаем PDF
createPDF(myImage);
}
//image - должен иметь свойста height,width и data - хранит картинку в base64
function createPDF(image) {
let w = ConvertPxToMM(image.width);
let h = ConvertPxToMM(image.height);
var orientation = w > h ? 'l' : 'p';
//Создаем документ PDF размером с нашу картинку
var docPDF = new jsPDF(orientation, 'mm', [w, h]);
//рисуем картинку на всю страницу
docPDF.addImage(image.data, 'JPEG', 0, 0);
//Сохраням полученный файл
//Возможные значения : dataurl, datauristring, bloburl, blob, arraybuffer, ('save', filename)
docPDF.output('save', 'test.pdf');
}
function ConvertPxToMM(pixels) {
return Math.floor(pixels * 0.264583);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<div>
<button type="button" onclick="Convert();">Сделай мне PDF из этой картинки</button>
</div>
<canvas id="myCanvas" width="300" height="300"></canvas>