My goal is to copy an image to the clipboard. Given it is not allowed to copy image due to security reason, the use case I want to tackle is:
- the user presses copy button
- through jquery select the image (focus and select)
- prompt the user to press
ctrl + c
to copy the image
The problem is that if I do this for an input, I can easily select the text inside that, but I am not able to do it for an image. Below is the abstracted version of what I am trying to do, mainly just select the image for now.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myImage").focus();
$("#myImage").select();
});
</script>
</head>
<body>
<img id="myImage" width="220" height="277" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" alt="The Scream">
</body>
</html>
Below is the same example but for an input and it works.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").focus();
$("#myInput").select();
});
</script>
</head>
<body>
<input id="myInput" value="hello"/>
</body>
</html>
If somebody can give me the correct of way doing this it would be appreciated. Thanks.