radImageEditor - Clipbooard support

2 Answers 21 Views
ImageEditor
Jason
Top achievements
Rank 1
Iron
Jason asked on 17 Jun 2021, 05:30 PM

I'm looking to see if there is a way to copy the current image that is in the RadImageEditor into clipboard, and also be able to replace it using Paste.

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Jason
Top achievements
Rank 1
Iron
answered on 18 Jun 2021, 05:37 PM | edited on 18 Jun 2021, 06:23 PM

For those looking for this functionality ill answer my own question.

To copy the current image in the drawing canvas to clipboard the following code works.

Unfortunately i'm not sure how to get the ImageEditor object outside of a callback so for this proof of concept i set it during load to the global varialbe GlobalImageEditor.

 


   <input type="button" value="COPY" onclick="copy()") />
    <script>

        var GlobalImageEditor;
        //Function to select text
        function SelectText(element) {
            var doc = document;
            if (doc.body.createTextRange) {
                var range = document.body.createTextRange();
                range.moveToElementText(element);
                range.select();
            } else if (window.getSelection) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(element);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
 
        function copy() {
            //Find the canvase
            var canvas = document.getElementById(GlobalImageEditor.getImage().id.replace("EditableImage", "canvas"));

            //Get source content in canvase and convet it into a image
            var img = document.createElement('img');
            img.src = canvas.toDataURL()

            //Wrap the image in a EDITABLE div
            var div = document.createElement('div');
            div.contentEditable = true;
            div.appendChild(img);
            document.body.appendChild(div);

            // select the div and hit copy
            SelectText(div);
            document.execCommand('Copy');


           //remove the div
            document.body.removeChild(div);
        };
       </script>

For paste i have not figured out how to trigger it programmatically but CTRL+V does work

 


<script>
 document.onpaste = function (pasteEvent) {
            // consider the first item (can be easily extended for multiple items)
            var item = pasteEvent.clipboardData.items[0];
            if (item.type.indexOf("image") === 0) {
                var blob = item.getAsFile();
                

                var reader = new FileReader();
                reader.onload = function (event) {
                    //SetUploadImage(event.target.result);
                    var canvas = document.getElementById(GlobalImageEditor.getImage().id.replace("EditableImage", "canvas"));
                    var ctx = canvas.getContext('2d');
                    var img = new Image;
                    img.onload = function () {
                        ctx.drawImage(img, 0, 0);
                    };
                    console.log(event.target.result)
                    img.src = event.target.result;
                };
                reader.readAsDataURL(blob);

            }
        }
</script>

Vessy
Telerik team
commented on 22 Jun 2021, 04:08 PM

Thanks for sharing your solution with the community, Jason!

You can also access the canvas element of the ImageEditor directly like follows:

var canvas = GlobalImageEditor.getEditableElement();

If you wish, you can also submit your solution as a Code Library for RadImageEditor here (your efforts will be rewarded with Telerik Points):

https://www.telerik.com/support/code-library/aspnet-ajax/image-editor

0
Vessy
Telerik team
answered on 18 Jun 2021, 03:40 PM

Hello Jason,

Currently RadImageEditor does not provide the desired functionality, but you can log a feature request for such improvement in our Feedback Portal here:

https://feedback.telerik.com/aspnet-ajax?listMode=Recent&typeId=2&categoryId=851

Regards,
Vessy
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ImageEditor
Asked by
Jason
Top achievements
Rank 1
Iron
Answers by
Jason
Top achievements
Rank 1
Iron
Vessy
Telerik team
Share this question
or