Html2Canvas Scale Issue - PullRequest
Новая
       4

Html2Canvas Scale Issue

0 голосов
/ 23 апреля 2019

Я пытаюсь преобразовать свой HTML-код в изображение, используя Html2Canvas Library .Чтобы получить высококачественное изображение в результате, я использую свойство scale со значением 2 .

html2canvas(element, {
            scale: 2
        }).then(function(canvas) {
            getCanvas = canvas;
            var imageData = getCanvas.toDataURL("image/png", 1);
            var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
        });

Теперь эти newData отправляются в php с помощью AJAX и для сохранения я использую следующий код - 

    define('UPLOAD_DIR', 'assets/output_images/');
    $image_parts = explode(";base64,", $_POST['ImageUri']);
    $image_type_aux = explode("image/", $image_parts[0]);
    $image_base64 = base64_decode($image_parts[1]);
    $file_name = uniqid().'.png';
    $file = UPLOAD_DIR . $file_name;
    $success =file_put_contents($file, $image_base64);

Но это всегда дает мне то же изображение, что иэто было по шкале со значением 1 , и окончательное изображение не улучшилось.

ПРИМЕЧАНИЕ. Размер моего div составляет 369 * 520, а размер сгенерированного изображения всегда равен 369 * 520 со значением масштаба 1, 2 или 3 и т. Д.

Заранее спасибо

1 Ответ

0 голосов
/ 23 апреля 2019

этого просто не может быть ... если вы используете размер растрового изображения, размер будет не лучшего качества, а меньшего. В лучшем случае вы создадите поддельные пиксели как копии оригинальных пикселей. Для реального масштаба с изображением (без потери качества) вы должны использовать скалярное изображение, такое как SVG, которого не будет в CANVAS, который использует растровое изображение, но в DOM как обычные элементы.

Очевидно, что вы можете использовать дополнительные параметры с context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); где ширина и высота будут конечной шириной и высотой в пикселях (поэтому изображения с более высоким качеством не будут большего размера, а будут иметь больший размер и более низкое качество, потому что пиксели умножаются с использованием поддельных пикселей, клонированных из исходного размера).

Надеюсь, у меня все в порядке.

edit: обратите внимание, что для рисования на холсте необходимо создать объект изображения, например, новое изображение ('imagename.png'); по крайней мере, но вы можете добавить атрибуты alt и другие вещи, такие как id или что-то подобное. для большего количества примеров источник W3schools.org canvas.drawImage (...)

...