I was looking a long time for the solution, but I can not find any. Is there any possibility to upload picture from clipboard to file on server (by pressing ctrl+v) ? It could work for Chrome.
Use PHP, Javascript, jquery, or maybe sth else? Some external extension for chrome?
Thanks a lot.
Steps to save a clipboard image as a JPG or PNG file: Press the 'S' key on your keyboard. Navigate to the image you want to save as JPG or PNG. After locating the image, click the 'New” button in the Snipping Tool app. If the image is stored on your computer, open it in photos first.
On a computer, this will usually entail clicking the Pictures or Photos section of the window that appears, clicking the photo that you want to upload, and clicking Open. On most phones and tablets, tapping the "Upload Photo" option will open your camera roll directly.
This is from an example with angular2 typescript that works for my project. Hope it helps someone. Logic is same for other cases as-well.
<textarea placeholder="Type a message" (paste)="onPaste($event)"></textarea>
<!-- Place to render the image -->
<img #imgRenderer />
// Reference to the dom element
@ViewChild('imgRenderer') imgRenderer: ElementRef;
onPaste(event: any) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
let blob = null;
for (const item of items) {
if (item.type.indexOf('image') === 0) {
blob = item.getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
const reader = new FileReader();
reader.onload = (evt: any) => {
console.log(evt.target.result); // data url!
this.imgRenderer.nativeElement.src = evt.target.result;
};
reader.readAsDataURL(blob);
}
}
Here is a live implementation:
https://stackblitz.com/edit/angular-f7kcny?file=app/app.component.ts
You can try:
https://github.com/layerssss/paste.js
Or
On paste event and clipboard API
http://www.w3schools.com/jsref/event_onpaste.asp
https://www.w3.org/TR/clipboard-apis/
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?
After you get image in javascript you can send base64 encoded image to server with AJAX. At server-side, you can decode it and write to a file.
Note: This works if you copy image inside browser (from other tab or window). It doesn't work when you copy image from desktop.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With