CODEWITHSUNDEEP
javascripthtml2canvas
Chirag Jain
Chirag Jain

Reputation: 628

Html2Canvas Scale Issue

I am trying to convert my HTML code to image using Html2Canvas Library. In order to get a high-quality image in the result, I am using scale property with value 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");
        });

Now this newData is sent to php using AJAX and to save I use below code - 

    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);

But it always gives me the same image as it was with the scale with value 1 and there is no improvement in the final image.

NOTE: My div dimension is 369 * 520 and generated image size is always 369*520 with scale value 1 or 2 or 3 etc.

Thanks in advance

Upvotes: 1

Views: 3796

Answers (1)

jean3xw
jean3xw

Reputation: 121

this just can't be... if you use bitmap image multiply size won't be better quality, but lower. You'll create fake pixels as copy of originals pixels at best. For a real scale with image(with no quality loss) you've to use scalar image such SVG who won't be in CANVAS who use bitmap image but in the DOM as regular Elements.

Obviously you can use optionals parameters with context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); where width and height will be final width and height in pixels(so no higher quality image just a larger size and a lower quality because pixels are multiplicated with fake pixels cloned form original size).

I hope i'be got your question fine.

edit: notice that to draw in canvas you've to create a image object such new Image('imagename.png'); at least but you can add the alt attributes and other stuff like an id or such. for more example source W3schools.org canvas.drawImage(...)

Upvotes: 1

Related Questions