pmanijak/image-overlay.html

## image-overlay.html
<html>
<head>
<!-- https://html2canvas.hertzen.com/ -->
<script src="html2canvas.min.js"></script>
<script>
function previewFile() {
    const preview = document.querySelector('#client-image');
    const file = document.querySelector('input[type=file]').files[0];
    const reader = new FileReader();

    reader.addEventListener("load", function() {
        // convert image file to base64 string
        preview.src = reader.result;
    }, false);

    if (file) {
        reader.readAsDataURL(file);
    }
}

function download() {
    html2canvas(document.querySelector('#preview')).then(function(canvas) {
        var image = canvas.toDataURL("image/png");
        // Click a virtual anchor tag so we can name our download.
        var anchor = document.createElement('a');
        anchor.setAttribute('download', 'profile-image.png');
        anchor.setAttribute('href', image);
        anchor.click();
    });
}
</script>
<style>
    #client-image {
        position: relative;
        top: 0;
        left: 0;
    }
    #overlay {
        position: absolute;
        top: 0;
        left: 0;
    }
    #preview {
        position: relative;
        overflow: hidden;
        width: 400px;
    }
</style>
</head>
<body>
    <input type="file" onchange="previewFile()"><br>
    <div id="preview">
        <img id="client-image" src="" height="400" alt="Image preview...">
        <img id="overlay" src="overlay.png" height="400" width="400"/>
    </div>

    <button onclick="download()">Download</button>
</body>
</html>
	<html>
	<head>
	<!-- https://html2canvas.hertzen.com/ -->
	<script src="html2canvas.min.js"></script>
	<script>
	function previewFile() {
	const preview = document.querySelector('#client-image');
	const file = document.querySelector('input[type=file]').files[0];
	const reader = new FileReader();

	reader.addEventListener("load", function() {
	// convert image file to base64 string
	preview.src = reader.result;
	}, false);

	if (file) {
	reader.readAsDataURL(file);
	}
	}

	function download() {
	html2canvas(document.querySelector('#preview')).then(function(canvas) {
	var image = canvas.toDataURL("image/png");
	// Click a virtual anchor tag so we can name our download.
	var anchor = document.createElement('a');
	anchor.setAttribute('download', 'profile-image.png');
	anchor.setAttribute('href', image);
	anchor.click();
	});
	}
	</script>
	<style>
	#client-image {
	position: relative;
	top: 0;
	left: 0;
	}
	#overlay {
	position: absolute;
	top: 0;
	left: 0;
	}
	#preview {
	position: relative;
	overflow: hidden;
	width: 400px;
	}
	</style>
	</head>
	<body>
	<input type="file" onchange="previewFile()"><br>
	<div id="preview">
	<img id="client-image" src="" height="400" alt="Image preview...">
	<img id="overlay" src="overlay.png" height="400" width="400"/>
	</div>

	<button onclick="download()">Download</button>
	</body>
	</html>