Download Image From HTML Canvas | Saatody

Today, The HTML canvas is very useful element for all developers who are creating web games, web controls, and web tools. In this post, I will explain about small use (but very important) of HTML Canvas is Convert HTML canvas (2d shapes and image) to image format and save image output in your device (local memory / hard drive / memory card).

See the below three images

All images file name is below with its URL.

Set these images on <img> tag

This very simple step to set above all URLs on img tag with unique id. I will set ids like polygon-1, polygon-2 and polygon-3. And also all images must "display:none" See the below code.

<img id="polygon-1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge9MKEaMz95QfnJ9V8_dB0keUqzrRONXVhNMf0Jjd70JCR2y9yD9Y7xhszimwpCjFCjysS3aulEdqXfC7INlU7qxi9B_PYoJ_Qrpf7NWyNtE8sRmjyNI4qoiLlVrQOvKIIxbjAuhx3nom7/s764/Picture1.png" alt="Polygon 1" title="Polygon 1" style="display:none;"/>
<img id="polygon-2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSVJGrvKBqVHFYd0XF6F8qZ-q8upO19r0ApVMTe_A4b6HlD7KAjP2ivvNSzbQbs-oues6kTNaSjphuRYdewEnY20s1QDYRLuf2akkg4p3d2ahYUX8zrBp5EjeyAlyjPdveXVKDMRwtkYX6/s683/Picture2.png" alt="Polygon 2" title="Polygon 2" style="display:none;"/>
<img id="polygon-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uvMT6462oSgXFOA6yRA6zXR-iB79VOIIoZYe0vYVN6SvAo9sm6a4GLOkbZSX3p3f6GYSDkl5FNCZS9Dx66lWFokAAIK-ZbSwPTG219cVp0a8v1bmXp90wglB1cyR4U0XhO0EfravtH0R/s682/Picture3.png" alt="Polygon 3" title="Polygon 3" style="display:none;"/>

Create download link

This will be anchor link (hyperlink). But here we will not use href attribute. here we put onclick event. The onclick event function will be in JavaScript. The download attribute is used when user click on this link then downloading() function will be execute and create some data (basically image) will download on your device as a "demo.png".

<a href="#" onclick="downloading(this);" download="demo.png">Download</a>

Setting up HTML canvas

<canvas id="canvas2d" width="500" height="500" style="border:1px solid rgb(0,0,0);"></canvas>

Create JavaScript downloading function

function downloading(e){
    var data = document.getElementById("canvas2d").toDataURL('image/png');
    e.href = data;
}

Here we simply get canvas object using getElementById. And toDataURL convert large string format of data from canvas and put it in href attribute of hyperlink. Here, The string 'imge/png' is your output format. It can be 'image/jpeg' also and as your requirement.

Set all images on canvas using JavaScript

var canvas2d = document.getElementById("canvas2d").getContext("2d");
canvas2d.scale(1,1);

var polygon1 = document.getElementById("polygon-1");
var polygon2 = document.getElementById("polygon-2");
var polygon3 = document.getElementById("polygon-3");

polygon1.onload = function(){
	canvas2d.drawImage(this,50,50,300,300);
};
polygon1.crossOrigin = "Anonymous";

polygon2.onload = function(){
	canvas2d.drawImage(this,150,50,300,300);
};
polygon2.crossOrigin = "Anonymous";

polygon3.onload = function(){
	canvas2d.drawImage(this,70,150,300,300);
};
polygon3.crossOrigin = "Anonymous";

Here, We get all image objects and store as polygonN in variable. After loading images, all image objecs will set on canvas using drawImage() method. If you want to carry out images from other origin (Not your own domain / Other's domain) then you must put crossOrigin = "Anonymous".

Get Full Code

Dowload Full Code: Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas To Image</title>
    </head>
    <body>
        
        <img id="polygon-1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge9MKEaMz95QfnJ9V8_dB0keUqzrRONXVhNMf0Jjd70JCR2y9yD9Y7xhszimwpCjFCjysS3aulEdqXfC7INlU7qxi9B_PYoJ_Qrpf7NWyNtE8sRmjyNI4qoiLlVrQOvKIIxbjAuhx3nom7/s764/Picture1.png" alt="Polygon 1" title="Polygon 1" style="display:none;"/>
        <img id="polygon-2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSVJGrvKBqVHFYd0XF6F8qZ-q8upO19r0ApVMTe_A4b6HlD7KAjP2ivvNSzbQbs-oues6kTNaSjphuRYdewEnY20s1QDYRLuf2akkg4p3d2ahYUX8zrBp5EjeyAlyjPdveXVKDMRwtkYX6/s683/Picture2.png" alt="Polygon 2" title="Polygon 2" style="display:none;"/>
        <img id="polygon-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uvMT6462oSgXFOA6yRA6zXR-iB79VOIIoZYe0vYVN6SvAo9sm6a4GLOkbZSX3p3f6GYSDkl5FNCZS9Dx66lWFokAAIK-ZbSwPTG219cVp0a8v1bmXp90wglB1cyR4U0XhO0EfravtH0R/s682/Picture3.png" alt="Polygon 3" title="Polygon 3" style="display:none;"/>
        
        <a href="#" onclick="downloading(this);" download="demo.png">Download</a>
        
        <canvas id="canvas2d" width="500" height="500" style="border:1px solid rgb(0,0,0);"></canvas>
        
        <script>
            function downloading(e){
                var data = document.getElementById("canvas2d").toDataURL('image/png');
                e.href = data;
            }
            
            var canvas2d = document.getElementById("canvas2d").getContext("2d");
            canvas2d.scale(1,1);
            
            var polygon1 = document.getElementById("polygon-1");
            var polygon2 = document.getElementById("polygon-2");
            var polygon3 = document.getElementById("polygon-3");
            
            polygon1.onload = function(){
                canvas2d.drawImage(this,50,50,300,300);
            };
            polygon1.crossOrigin = "Anonymous";
            
            polygon2.onload = function(){
                canvas2d.drawImage(this,150,50,300,300);
            };
            polygon2.crossOrigin = "Anonymous";
            
            polygon3.onload = function(){
                canvas2d.drawImage(this,70,150,300,300);
            };
            polygon3.crossOrigin = "Anonymous";
        </script>
    </body>
</html>

Get Live Output

Download

Search This Blog

Amit Padhiyar - Saatody