MaxInterview - js copy image to clipboard

showing results for - "js copy image to clipboard"

17 Sep 2017

1function copy() {
2  var copyText = document.querySelector("#input");
3  copyText.select();
4  document.execCommand("copy");
5}
6
7document.querySelector("#copy").addEventListener("click", copy);

Giovanni

09 Mar 2016

1navigator.clipboard.writeText("Hello, World!");

Holly

26 Oct 2018

1// Since Async Clipboard API is not supported for all browser!
2function copyTextToClipboard(text) {
3  var textArea = document.createElement("textarea");
4  textArea.value = text
5  document.body.appendChild(textArea);
6  textArea.focus();
7  textArea.select();
8
9  try {
10    var successful = document.execCommand('copy');
11    var msg = successful ? 'successful' : 'unsuccessful';
12    console.log('Copying text command was ' + msg);
13  } catch (err) {
14    console.log('Oops, unable to copy');
15  }
16
17  document.body.removeChild(textArea);
18}

Maelie

29 May 2020

1// Copies the image as a blob to the clipboard (PNG only)
2navigator.clipboard.write([
3  new ClipboardItem({
4    [blob.type]: blob,
5  }),
6])

Romina

19 Apr 2016

1$(document).ready(function(){
2	$("#ewefmwefmp").click(function(){
3    //alert()
4      var copyText = document.getElementById("myInput");
5      copyText.select();
6      copyText.setSelectionRange(0, 99999)
7      document.execCommand("copy");
8      alert("Copied the text: " + copyText.value);
9    
10    });
11});

Marvin

12 Aug 2016

1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6.tooltip {
7  position: relative;
8  display: inline-block;
9}
10
11.tooltip .tooltiptext {
12  visibility: hidden;
13  width: 140px;
14  background-color: #555;
15  color: #fff;
16  text-align: center;
17  border-radius: 6px;
18  padding: 5px;
19  position: absolute;
20  z-index: 1;
21  bottom: 150%;
22  left: 50%;
23  margin-left: -75px;
24  opacity: 0;
25  transition: opacity 0.3s;
26}
27
28.tooltip .tooltiptext::after {
29  content: "";
30  position: absolute;
31  top: 100%;
32  left: 50%;
33  margin-left: -5px;
34  border-width: 5px;
35  border-style: solid;
36  border-color: #555 transparent transparent transparent;
37}
38
39.tooltip:hover .tooltiptext {
40  visibility: visible;
41  opacity: 1;
42}
43</style>
44</head>
45<body>
46
47<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
48
49<input type="text" value="Hello World" id="myInput">
50
51<div class="tooltip">
52<button onclick="myFunction()" onmouseout="outFunc()">
53  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
54  Copy text
55  </button>
56</div>
57
58<p>The document.execCommand() method is not supported in IE8 and earlier.</p>
59
60<script>
61function myFunction() {
62  var copyText = document.getElementById("myInput");
63  copyText.select();
64  copyText.setSelectionRange(0, 99999);
65  document.execCommand("copy");
66  
67  var tooltip = document.getElementById("myTooltip");
68  tooltip.innerHTML = "Copied: " + copyText.value;
69}
70
71function outFunc() {
72  var tooltip = document.getElementById("myTooltip");
73  tooltip.innerHTML = "Copy to clipboard";
74}
75</script>
76
77</body>
78</html>
79

queries leading to this page