To get started, you need to tap into the Paste event.
Example 1 code:
<textarea type="text" class="pasteable" id="myInput" placeHolder="Try to paste something in here"></textarea>
<script>
document.getElementById("myInput").onpaste = function() {myFunction()};
function myFunction(ex) {
alert("You pasted something!");
}
</script>
After you run an example paste above, you'll see the alert. The actual event object is what contains the goodies about the paste which is of type ClipboardEvent. We'll want to look at that next:
Example 2 code:
<textarea type="text" class="pasteable" id="myInput" placeHolder="Try to paste something in here"></textarea>
<script>
document.getElementById("myInput").onpaste = function() {myFunction()};
function myFunction(ex) {
console.log("You pasted something...");
console.log(event);
}
</script>
Now that we know to look inside the ClipboardEvent - we will grab the data inside of event.clipboardData. We loop the items of this event and check the type.
Example 3 code:
<textarea type="text" class="pasteable" id="myInput" placeHolder="Try to paste something in here"></textarea>
<script>
document.getElementById("myInput").onpaste = function() {myFunction()};
function myFunction(ex) {
console.log(event);
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
console.log(items);
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) { console.log("We have an image!"); }
}
}
</script>
After confirming we have an image, we need to do a few more things. First, add a placeholder image tag to our html - I've labeled mine imagePreview. We will also setup a variable called blob and populate it using getAsFile.
Example 4 code:
<textarea type="text" class="pasteable" id="myInput" placeHolder="Try to paste something in here"></textarea>
<img src="" id="imagePreview" />
<script>
document.getElementById("myInput").onpaste = function() {myFunction()};
function myFunction(ex) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
console.log(event.target.result);
document.getElementById("imagePreview").src = event.target.result;
};
reader.readAsDataURL(blob);
} else {
alert('No image found')
}
}
</script>
For my personal project, I really just want to be able to paste in and image and do a quick crop. We will use Canvas to do this and generate a new image. We will start by adding a canvas tag, and loading the entire image we pasted into the canvas. We still want to read the image from file, but instead of putting it into the img source, we will put it as the canvas source. I will resize the canvas based on the uploaded image so we don't miss any of the content.
Example 5 code:
<textarea type="text" class="pasteable" id="myInput" placeHolder="Try to paste something in here"></textarea>
<canvas id="myCanvas" width="0" height="0"> </canvas>
<script>
document.getElementById("myInput").onpaste = function() {myFunction()};
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
canvas.width = imageObj.width;
canvas.height = imageObj.height;
context.drawImage(imageObj, 0, 0);
};
function myFunction(ex) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
imageObj.src = event.target.result;
};
reader.readAsDataURL(blob);
} else {
alert('No image found')
}
}
</script>
Now that we have the entire screenshot loaded into the canvas, we will want to draw our cropping rectangle.
Example 6 code:
<textarea type="text" class="pasteable" id="myInput6" placeHolder="Try to paste something in here"></textarea>
<div id="output"></div>
<div class="preview-canvas-container">
<canvas id="saveNewImage" class="preview-canvas" width="0" height="0">
</canvas>
<a href="javascript:SaveImageLocally()" id="save-link" class="button">Save Image
</a>
<a id="link">
</a>
<div class="canvas-wrapper">
<canvas id="myCanvas6" width="400" height="400">
</canvas>
<canvas id="editCanvas6" width="400" height="400">
</canvas>
</div>
<script> function SaveImageLocally() {
var link = document.getElementById('link');
var data = saveNewImage6.toDataURL("image/png").replace("image/png", "image/octet-stream");
var d = new Date();
var fileName = d.toLocaleDateString() + "_" + d.toLocaleTimeString(); fileName = fileName.split(":").join("-"); fileName = fileName.split("/").join("-"); fileName = fileName.split(" ").join("-");
link.setAttribute('download', 'Jaseowns_' + fileName + '.png');
link.setAttribute('href', data);
if (data.length > 10) {
link.click();
} else {
alert('No image found');
}
}
document.getElementById("myInput6").onpaste = function(event) {myFunction6(event)};
var canvas6 = document.getElementById('myCanvas6');
var context6 = canvas6.getContext('2d');
var saveNewImage6 = document.getElementById('saveNewImage');
var saveNewImageContext6 = saveNewImage6.getContext('2d');
var editcanvas6 = document.getElementById('editCanvas6');
var editcontext6 = editcanvas6.getContext('2d');
var imageObj6 = new Image();
imageObj6.onload = function() {
canvas6.width = imageObj6.width;
canvas6.height = imageObj6.height;
context6.drawImage(imageObj6, 0, 0);
editcanvas6.width = imageObj6.width;
editcanvas6.height = imageObj6.height;
canvasx = $(editcanvas6).offset().left - window.pageXOffset;
canvasy = $(editcanvas6).offset().top - window.pageYOffset;
};
function myFunction6(event) {
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
var blob = null;
for (var i = 0; i
< items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
imageObj6.src = event.target.result;
};
reader.readAsDataURL(blob);
} else {
alert('No image found')
}
}
var canvasx = $(editcanvas6).offset().left - window.pageXOffset;
var canvasy = $(editcanvas6).offset().top - window.pageYOffset;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;
var rect = {};
/*Mousedown*/
$(editcanvas6).on('mousedown', function(e) {
last_mousex = parseInt(e.clientX-canvasx);
last_mousey = parseInt(e.clientY-canvasy);
mousedown = true;
});
/*Mouseup*/
$(editcanvas6).on('mouseup', function(e) {
mousedown = false;
if (rect.sourceX) {
saveNewImage6.width = rect.sourceWidth;
saveNewImage6.height = rect.sourceHeight;
saveNewImageContext6.drawImage(canvas6, rect.sourceX, rect.sourceY, rect.sourceWidth, rect.sourceHeight, rect.destX, rect.destY, rect.destWidth, rect.destHeight);
}
});
/*mousemove*/
$(editcanvas6).on('mousemove', function(e) {
canvasx = $(editcanvas6).offset().left - window.pageXOffset;
canvasy = $(editcanvas6).offset().top - window.pageYOffset;
mousex = parseInt(e.clientX-canvasx);
mousey = parseInt(e.clientY-canvasy);
if(mousedown) {
editcontext6.clearRect(0,0,editcanvas6.width,editcanvas6.height);
/*editcontext6.fillStyle = "rgba(255, 255, 255, 0.5)";
editcontext6.fillRect(0, 0, editcanvas6.width, editcanvas6.height);*/
editcontext6.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
rect = {
sourceX: last_mousex,
sourceY: last_mousey,
sourceWidth: width,
sourceHeight: height,
destX: 0,
destY: 0,
destWidth: width,
destHeight: height
};
editcontext6.rect(last_mousex,last_mousey,width,height);
/*editcontext6.fillStyle = "rgba(255, 255, 255, 0.0)";
editcontext6.fillRect(last_mousex,last_mousey,width,height);*/
editcontext6.strokeStyle = 'red';
editcontext6.lineWidth = 5;
editcontext6.stroke();
}
$('#output').html('current: '+mousex+', '+mousey+'last: '+last_mousex+','+last_mousey+'mousedown: '+mousedown);
});
</script>
Hopefully that made sense! If you have any questions hit me up on Twitter.
Thanks!