devforth
right click copy image is not working
I can't copy the canvas as an image. Is it possible to enable the copy image with right click on the canvas? or add copy button that copy the full area of my canvas?
Got your request. Thanks. Reason why I did not add it - browser had a restricted support for copy binary data into Clipboard. Though it is possible via some workaround like substituting img tag.
Thanks Ivan for your reply. Any way to copy the image from the canvas will be fine, here is some ideas that may help you to improve Painterro: This one is a default way that allow you to copy the canvas as an image by just right click on the canvas and then select copy image: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage
Here is another way to copy canvas, I got it work only in Chrome
<!DOCTYPE HTML>
<html>
<body>
<button onclick="copy()">Copy</button>
<script>
function copy() {
const canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#eee";
ctx.fillRect(10, 10, 50, 50);
canvas.toBlob(function(blob) {
const item = new ClipboardItem({ "image/png": blob });
navigator.clipboard.write([item]);
alert("Copied!");
});
}
</script>
</body>
</html>
substituting img tag look like a new and good idea, but I don't know about it.
Another three things that will make Painterro complete and very useful:
- Rotate (when you draw something, square for example, it will be great if you can rotate it), like the one on this tool ( https://editor.method.ac/ )
- Draw triangle
- Draw polygon, like the one on this tool (http://literallycanvas.com/)
Thanks again and I wish you a happy New Year!
@hedani I just implemented Ctrl+C for both selected area and whole image, but still without right click - we can't add custom menu items but can replace menu at all. Probably better to implement another button with copy icon on toolbar (or even better - make an ability to set additional codes)
@ivictbor Well done :) ! ctrl+c is fine. Thank you for the great work on this great tool.
I tried to test it locally but It didn't work. I just clone the project via npm and imported the painterro.min.js file in my project. Can you please send me the painterro.min.js you use? if you can make a simple html example with the min.js file one a zip will be great.
Thanks again for this good news and happy 2021 ;-)
@hedani which browser and version did you try. The API I have used might be pretty fresh, but anyway it is most sutable and future based approach. Also we've fixed several major bugs at the beginning of a 2021, so better use latest version to try
I'm using the last version of Windows Chrome Version 88.0.4324.182 (Official Build) (64-bit) And the last version of Windows Firefox Version 85.0.2 (64-bit) In both not working :-/
Painterro 1.2.36
Here is an old version, I tried here https://jsfiddle.net/pnu1octd/3/
https://github.com/devforth/painterro/releases/download/v1.2.36/painterro-1.2.36.min.js
@hedani pretty strange, for me still working even your fiddle. Could you elaborate more on what you are coping and how.
I tested your fiddle in two ways:
- PrntScr, focused fiddle frame, Ctrl+W, on windows, latest Chrome
- Copied from Painterro selection, pasted with Ctrl+V
BTW we made a lot of important fixes in the latest versions, recommend to update
@ivictbor I don't know how you test it with Ctrl+w :) , this shortcut close the open tab in Chrome, Firefox and almost all browsers. If Ctrl+w works on your Chrome, it mean you have done some changes in the Chrome settings. Because the default "Close the current tab Ctrl+w or Ctrl+F4", ref. https://support.google.com/chrome/answer/157179#zippy=%2Ctab-and-window-shortcuts
About your first point, the issue was not with PrntScr, but how to copy from the painterro canvas to Clipboard.
Please read your previous comments about ctrl+c.
Can you share the last version in fiddle and test it again if ctrl+c will copy the select area?
Thanks again for the great work and this very useful tool!
@ivictbor I don't know how you test it with Ctrl+w :) , this shortcut close the open tab in Chrome, Firefox and almost all browsers. If Ctrl+w works on your Chrome, it mean you have done some changes in the Chrome settings. Because the default "Close the current tab Ctrl+w or Ctrl+F4", ref. https://support.google.com/chrome/answer/157179#zippy=%2Ctab-and-window-shortcuts
About your first point, the issue was not with PrntScr, but how to copy from the painterro canvas to Clipboard.
Please read your previous comments about ctrl+c.
Can you share the last version in fiddle and test it again if ctrl+c will copy the select area?
Thanks again for the great work and this very useful tool!
Sorry, it was a typo, Ctrl+V of course
Thanks for your reply. Can you please test the ctrl+c and let me know if it works on your side to copy the selection from the canvas into clipboard?
Ctrl+v and printscr working very fine.
I want to copy the canvas image or part (selection) from the canvas because I can't draw a polygon with Painterro or rotate a selection. That's why I want to copy option so I can easy edit it in an external paint app.
If you can add these features to the Painterro, will make it fully useful:
- Rotate selection
- Draw polygon (so you can draw a triangle or any thing you want)
- Ctrl + C to copy a selection
Please let me know if ctrl+c is work to copy image from Painterro canvas.
Thanks alot!
@hedani https://drive.google.com/file/d/1kyUhl459ZGNI-ktT3v4JlY8UAY_s5DuV/view
Since there is nothing we can do here from our side, closing this. Feel free to reopen or recreate issues with detailed steps to reproduce