Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to set dpi on jpeg image download?

$("#download-pdf-template").on("click", function(e) {  
    overallwidthcover = parseFloat(Number(overallwidthcover).toFixed(3));
    overallcoverhegiht = parseFloat(Number(overallcoverhegiht).toFixed(3));

    var covertype = $(this).data('id');
    var pdfWidthInInches = overallwidthcover ? overallwidthcover : 12.80;
    var pdfHeightInInches = overallcoverhegiht ? overallcoverhegiht : 9.25;


    var fileName;
    var htmlContent;

    if (Number(covertype) == 1) {
        htmlContent = '#paperpBackDownload';
        fileName = 'paper_back_cover_template.jpeg';
    } else {
        htmlContent = '#caseboundbackDownload';
        fileName = 'casebound_cover_template.jpeg';
    }

    var elementHTML = document.querySelector(htmlContent);
     // Desired DPI and dimensions
     var dpi = 300;
    
     var widthInPixels = pdfWidthInInches * 72;
     var heightInPixels = pdfHeightInInches * 72;

    html2canvas(elementHTML, {
        useCORS: true,
        // scale: 2  
        scale: dpi / 72
    }).then(function(canvas) {
        var adjustedCanvas = document.createElement('canvas');
        adjustedCanvas.width = widthInPixels;
        adjustedCanvas.height = heightInPixels;
        var ctx = adjustedCanvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, widthInPixels, heightInPixels);

        var imgData = adjustedCanvas.toDataURL('image/jpeg', 1.0); // Convert to JPEG
       
        // Create a link element and simulate a click to download the image
        var link = document.createElement('a');
        link.href = imgData;
        link.download =  fileName;
        link.click();
    }).catch(function(error) {
        console.error('Error capturing image:', error);
    });
});

I have an download button on clicking it will download an html content as jpeg. Everything seems fine but when i have open this image in pdf viewer then its dpi is 72 i want its dpi to be set as 300 how can i do that?

Tags:

2

Answers


  1. 0

    This question seems to be a duplicate

    By the way, let’s Google a bit o what does DPI stand for: DPI stands for Dots per Inch.

    I fear that, since this is just a scanning setting/property for image acquisition, playing with height/width values won’t change the image in terms of "resolution" during its download.

    Login or Signup to reply.
  2. 0

    As you know, DPI means "dots per inch." If you want your image DPI to be 300 instead of 72, you should multiply the pdfWidthInInches and pdfHeightInInches by 300, which results in 300 dots per inch (300dpi) and a bigger image of course.

    So it will be:

    var dpi = 300;

var widthInPixels = pdfWidthInInches * dpi;
var heightInPixels = pdfHeightInInches * dpi;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search