radImageEditor - Clipbooard support

2 Answers 113 Views

ImageEditor

2 Answers, 1 is accepted

Accepted

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

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