Created
April 7, 2016 21:05
-
-
Save anonymous/78170557c31baf15ed8f550e43e0956a to your computer and use it in GitHub Desktop.
// source http://jsbin.com/codipijuha
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <style id="jsbin-css"> | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #Canvas, #profile {border: 1px red solid;} | |
| #profile { | |
| position: relative; | |
| left:100px; | |
| top:-280px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <input type='file' id="fileUpload" /> | |
| <hr> | |
| <canvas id="Canvas" width="300" height="300"></canvas> | |
| <canvas id="profile" width="100" height="100"> </canvas> | |
| <button id="btn" onClick="rectangle">Create</button> | |
| <script id="jsbin-javascript"> | |
| var canvas = document.getElementById('Canvas'); | |
| var fileLoader = document.getElementById('fileUpload'); | |
| fileLoader.addEventListener('change', handleImage, false); | |
| canvas.addEventListener('change', handleImage, false); | |
| var ctx_main = canvas.getContext('2d'); | |
| /* | |
| do cool things with the context | |
| */ | |
| ctx_main.font = '12pt Arial'; | |
| ctx_main.fillStyle = 'blue'; | |
| ctx_main.fillText('Hello World!', 10, 100); | |
| /* cool stuff over */ | |
| function handleImage(e){ | |
| var reader = new FileReader(); | |
| reader.onload = function(event){ | |
| var img = new Image(); | |
| img.onload = function(){ | |
| //canvas.width = img.width; | |
| //canvas.height = img.height; | |
| ctx_main.drawImage(img,0,0); | |
| }; | |
| img.src = event.target.result; | |
| }; | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| function rectangle(){ | |
| } | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <input type='file' id="fileUpload" /> | |
| <hr> | |
| <canvas id="Canvas" width="300" height="300"></canvas> | |
| <canvas id="profile" width="100" height="100"> </canvas> | |
| <button id="btn" onClick="rectangle">Create</button> | |
| </body> | |
| </html> </script> | |
| <script id="jsbin-source-css" type="text/css"> body { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #Canvas, #profile {border: 1px red solid;} | |
| #profile { | |
| position: relative; | |
| left:100px; | |
| top:-280px | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById('Canvas'); | |
| var fileLoader = document.getElementById('fileUpload'); | |
| fileLoader.addEventListener('change', handleImage, false); | |
| canvas.addEventListener('change', handleImage, false); | |
| var ctx_main = canvas.getContext('2d'); | |
| /* | |
| do cool things with the context | |
| */ | |
| ctx_main.font = '12pt Arial'; | |
| ctx_main.fillStyle = 'blue'; | |
| ctx_main.fillText('Hello World!', 10, 100); | |
| /* cool stuff over */ | |
| function handleImage(e){ | |
| var reader = new FileReader(); | |
| reader.onload = function(event){ | |
| var img = new Image(); | |
| img.onload = function(){ | |
| //canvas.width = img.width; | |
| //canvas.height = img.height; | |
| ctx_main.drawImage(img,0,0); | |
| }; | |
| img.src = event.target.result; | |
| }; | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| function rectangle(){ | |
| } | |
| </script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| #Canvas, #profile {border: 1px red solid;} | |
| #profile { | |
| position: relative; | |
| left:100px; | |
| top:-280px | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas = document.getElementById('Canvas'); | |
| var fileLoader = document.getElementById('fileUpload'); | |
| fileLoader.addEventListener('change', handleImage, false); | |
| canvas.addEventListener('change', handleImage, false); | |
| var ctx_main = canvas.getContext('2d'); | |
| /* | |
| do cool things with the context | |
| */ | |
| ctx_main.font = '12pt Arial'; | |
| ctx_main.fillStyle = 'blue'; | |
| ctx_main.fillText('Hello World!', 10, 100); | |
| /* cool stuff over */ | |
| function handleImage(e){ | |
| var reader = new FileReader(); | |
| reader.onload = function(event){ | |
| var img = new Image(); | |
| img.onload = function(){ | |
| //canvas.width = img.width; | |
| //canvas.height = img.height; | |
| ctx_main.drawImage(img,0,0); | |
| }; | |
| img.src = event.target.result; | |
| }; | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| function rectangle(){ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment