I want to do photo effects which is uploaded by user in javascript <p>I want do some photo fun effects in my website. If user upload their file, its automatically display the output, which effect is user selected. This is doing in JavaScript with html. I want yours favour for how to do mask effect in JavaScript. I just did upload the image from local and its display in same page and also i need to apply the effects in it.This is my script</p> <pre><code>&lt;script language="javascript" type="text/javascript"&gt; window.onload = function () { var fileUpload = document.getElementById("fileupload"); fileUpload.onchange = function () { if (typeof (FileReader) != "undefined") { var dvPreview = document.getElementById("dvPreview"); dvPreview.innerHTML = ""; var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; for (var i = 0; i &lt; fileUpload.files.length; i++) { var file = fileUpload.files[i]; if (regex.test(file.name.toLowerCase())) { var reader = new FileReader(); reader.onload = function (e) { var img = document.createElement("IMG"); img.height = "600"; img.width = "600"; img.src = e.target.result; dvPreview.appendChild(img); } reader.readAsDataURL(file); } else { alert(file.name + " is not a valid image file."); dvPreview.innerHTML = ""; return false; } } } else { alert("This browser does not support HTML5 FileReader."); } } }; &lt;/script&gt; </code></pre> <p>My Html code:</p> <pre><code>&lt;input id="fileupload" type="file" multiple="multiple" /&gt;&lt;hr /&gt; &lt;b&gt;Live Preview&lt;/b&gt;&lt;br&gt; &lt;div id="dvPreview" &gt; &lt;/div&gt; </code></pre> <p>How can i apply the effects which image is uploaded by user. <a href="http://i.stack.imgur.com/vMFfQ.png" rel="nofollow">Mask image is here</a> | <a href="http://i.stack.imgur.com/UYrPE.jpg" rel="nofollow">I need this output - Output image is here</a></p> <p>User uploaded image need to be in background with blur effect and image is in a design i need dude's. Thanks for advance to spend your golden time for me.</p>