Convert div into downloadable Image

Question

This is the code which I am using to convert div into image and download that using html2canvas.js

Answer 1

Increase resolution by making more pixels

Resolution kind of equals pixel density. If you want greater resolution then one attempt to create more pixels is to create a second canvas with a proportionally larger width & height and then use secondaryContext.scale & secondaryContext.drawImage(mainCanvas,0,0) to enlarge & draw the main canvas content onto the second canvas. Use this larger canvas, for example, on a printer.

Here's an example that increases the pixel density at the cost of some clarity. You don't state why you desire more resolution, but this example is useful, for example if you're outputting the image to a printer. Note: The printed page will be clearer than the density-increased image you feed to the printer because the printer prints at higher density (maybe 300dpi printer resolution vs maybe 72/96ppi).

var divX2=document.createElement('canvas');
divAt2X('#download',1.5);

$('#go').on('click',function(){
    // save
    var a = document.createElement('a');
    a.href = divX2.toDataURL("image/png");       
    a.download = 'image.png';
    a.click();                
});

function divAt2X(id,upscale){
    var w=$(id).width();
    var h=$(id).height();
    html2canvas($(id),{
        onrendered:
            function(canvasDiv){
                // scale up
                ctx=divX2.getContext('2d');
                divX2.width=w*upscale;
                divX2.height=h*upscale;
                ctx.scale(upscale,upscale);
                ctx.drawImage(canvasDiv,0,0);
            }
        }
    );
}

        #download{
            margin:10% 20%;
        }
        .download-btn{
          padding:10px;
          font-size:20px;
          margin:0 20px;
        }
        #test{
          background:#3399cc;
          padding:50px;
        }

Download 1.5X(IE/Edge don't support download)
Testing Download

If you have already dismissed html2Canvas, then your way forward is more difficult because html2Canvas is one (perhaps the only one) tool we have to read html+css and draw them to the canvas element.

Increase resolution with an image manipulation library

You can use the ImageMagick library. In particular, the ImageMagick resize method will change the embedded resolution of a .png image using resampling for better quality.

Use a headless-browser on the server to capture the Div

If you need cross-browser compatibility, then you can use a server-size headless browser like PhantomJS.

The captureJS extension to PhantomJS allows you to specify a target div using standard CSS selectors. CaptureJS lets you specify the viewport size -- effectively letting you increase the pixel density.