<!DOCTYPE html>
<html>
<head>
<title>Paste-able Canvas</title>
<script type="text/javascript">
function enablePasteForCanvas(canvas) {
var pasteEvent = function(e) {
(function() {
var i;
// Search image data in the clipboard
var items = e.clipboardData.items;
var imageItem = null;
for(i = 0; i < items.length; i++) {
if(items[i].type.indexOf("image/") != -1) {
imageItem = items[i];
break;
}
}
if(! imageItem) {
console.log("clipboard does not contain an image.");
return;
}
//convert: clipboardData.items -> Blob -> Image
var blob = imageItem.getAsFile();
var blobUrl = window.URL.createObjectURL(blob);
var img = new Image();
img.onload = function() {
//Draw the image on canvas
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
};
img.src = blobUrl;
}());
e.preventDefault();
};
canvas.addEventListener("focus", function(e){
document.addEventListener("paste", pasteEvent, false);
}, false);
canvas.addEventListener("blur", function(e){
document.removeEventListener("paste", pasteEvent, false);
}, false);
}
window.addEventListener("load",function(e){
enablePasteForCanvas(document.getElementById("my_canvas"));
}, false);
</script>
</head>
<body>
<h2>Paste an image below</h2>(use Cntl + V)
<br><br>Browswer: Chrome only.<br>
<table border=1 width=640><tr><td>
<canvas id="my_canvas" width="640" height="280" tabindex="2"></canvas>
</table>
<br><br>
<form type=POST action=drag.php>
Text: <input type=textbox name=text_1 width=10><br><br>
Color: <input type=radio name=radio_1 value=blue> Blue
<input type=radio name=radio_1 value=red> Red <br><br><br>
<input type=submit name=submit value=submit>
</form>
</body>
</html>
Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.
When asked, what has been your best career decision?
Deciding to stick with EE.
Being involved with EE helped me to grow personally and professionally.
Connect with Certified Experts to gain insight and support on specific technology challenges including:
We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE