| 2022-06-17

How to Download a File in HTML

    Downloading an Image

    kitten

    A kitten. Image credit: blog.feliway.com

    To allow download of an image in the browser, we can use the anchor <a> link tag.

    <a href="/images/kitten.jpg" download>
      <img src="/images/kitten.jpg" alt="kitten">
    </a>
    
    HTML

    Set the href attribute to point to the image. The "download" attribute enables downloading when link is clicked.

    Downloading the HTML5 Canvas

    The HTML5 canvas allows for dynamic graphics rendering in the browser. We use javascript to apply various drawing methods to the canvas. We can produce 2D shapes, graphics or manipulate and combine bitmap images.

    To download an image drawn on the HTML5 canvas, we should extract the canvas image data in a format that can be fed into the anchor tag.

    const dataURL = canvas.toDataURL('image/jpeg', 1.0);
    
    JavaScript

    The dataURL is a format designed to enable inclusion of ASCII string encoded data, in-line on web pages.

    The dataURL (abbreviated):

    data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIBPAJYAMBEQACEQEDEQH/xAAfAAAABwEBAQEBAAAAAAAAAAAAAwQFBgcIAgEJCgv/xABfEAABAgQEAwUGBAUBBAYFARkBAhEDBAUhAAYSMQdBURMiYXGBkaGxwdHwCBQy4RUjQlLxFjNikqIJFyRTcoIlNENzsrPSGFRjdJM1NoOj4iY3RFVWlMLThKRFZIXy/8QAHQEBAAMBAQEBAQEAAAAAAAAAAAIDBAEFBgcICf/EAFsRAAECAwQIBAMDBQwJAQUHBQEAEQIhMUFRYfADEnGBkaGx0QQyweETIvEFBlIHFCNCYhUWNENTVFVykpOy0ggXMzU2c4Kis3Qkg5SjpCUmN0RFY4TC4mRG8v/aAAwDAQACEQMRAD8ArZNWADgi13Htvv8AfLH831X9ILlWZEgFIUHFm6PblbyxzUFWq9+/hyRcrq7pLxAH8vNmfnz+mOokqqskKPeHhcX6OOg2588BhngiH8ViB1a92f8ATfpt8saEXRra9LFQ8z54IkkWsxEue0G/QbX9/
    
    javascript

    Note the data string is prefixed with data:image/jpeg;base64. This indicates that the data is a JPEG image in base64 binary format.

    The dataURL can be used as the href value of the anchor tag.

    anchorTag.href = dataURL
    
    JavaScript

    The app below will download a jpeg file from the image drawn to canvas. The images displayed, the kitten and the pink text, will be combined using the canvas drawImage() method.

    canvas2dcontext.drawImage(kitten, 0, 0);
    canvas2dcontext.drawImage(textLayer, 0, 0);
    
    JavaScript

    The composit image will appear in the areas indicated by the RESULT text, and automatically download. Click the link if you want to examine the app code (view the HTML source).


    Thanks for reading. If you enjoyed this post, I invite you to explore more of my site. I write about web development, programming, and other fun stuff.