Auto resize image when paste to update ticket

genx88

Is it possible to force an image size of 200 x 200 px when pasting an image while updating a ticket (in ticket-view.php)? Currently, when we paste an image during a ticket update, the file size is very large, and we have to manually resize it—which is quite cumbersome. I’m thinking of creating a script to "hack" this process so that any pasted image is automatically resized to 200 x 200 px; this would also help save space in the osTicket database.

DuaerTeam

Resizing the image inside the editor won't save any space, unfortunately. When you paste, the editor uploads the original clipboard image to the draft attach endpoint (ajax.php/draft/<id>/attach), and _uploadInlineImage() in include/ajax.draft.php stores it as it is. It only checks that it's an allowed image type and under the max file size. Dragging the image smaller afterwards just adds width and height attributes to the HTML, so the full file is still what gets saved.

That means the resize has to happen before the file is stored. There are two places you could hook it:

In the browser, in js/redactor-osticket.js: catch the pasted image, draw it onto a canvas at the size you want, and upload that instead of the original.
On the server, in _uploadInlineImage(): resize the uploaded image before it's saved.

You might prefer capping the width and keeping the aspect ratio rather than forcing a square, so screenshots stay readable. Both options are core changes, so keep a note of them to reapply after each upgrade.

Are most of the pasted images screenshots, or photos from phones?

genx88

DuaerTeam thanks for your insight. i try to add this script to file /include/staff/ticket-view.php and it works fine. it can resize image proportional 60%..

window.addEventListener('paste', function(e) {

var editor = e.target.closest('.redactor-editor, .redactor_editor, .redactor-in, div[contenteditable="true"]');
if (!editor) return; 

var clipboardData = e.clipboardData || window.clipboardData;
if (!clipboardData) return;

var items = clipboardData.items;


for (var i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") !== -1) {
        
    
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        var file = items[i].getAsFile();
        var reader = new FileReader();

        reader.onload = function(event) {
            var img = new Image();
            img.onload = function() {
                
              
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

           
                var newWidth = Math.round(img.width * 0.60);
                var newHeight = Math.round(img.height * 0.60);

                canvas.width = newWidth;
                canvas.height = newHeight;

                ctx.fillStyle = '#FFFFFF';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

              
                ctx.drawImage(img, 0, 0, newWidth, newHeight);

                   var resizedDataUrl = canvas.toDataURL('image/jpeg', 1);

           
                editor.focus();
                var imgTag = '<img src="' + resizedDataUrl + '" width="' + newWidth + '" height="' + newHeight + '" style="width: ' + newWidth + 'px; height: ' + newHeight + 'px; border: 1px solid #ccc; margin: 5px;">';
                document.execCommand('insertHTML', false, imgTag);
            };
            img.src = event.target.result;
        };
        
        reader.readAsDataURL(file);
        
      
        break; 
    }
}

}, true);
</script>