Help Regarding Image Cropping html extension

pacecode
Sat, 30 Mar 2024 03:34:19 +0000
Questions about Thunkable

Hi Community!

I want help Regarding integrating an Image Cropping HTML Extension in Thunkable,

Crop images with fingers Free Templates, Designs, and Block Combinations

Dear community, I would like to share with you a simple example of implementing a feature for cropping images with fingers. Managing pictures in Thunkable is where I spent a lot of weeks and I wanted to give back something that I hope can help some of you. My problem was to find a way to crop images of ID Cards, so I first tried with the Cloudinary API but, in my experience, they were not sufficiently mature for me, so I developed something new in Javascript. So, the final solution is based …

@dani19130a made a Thunkable Extension using Scaleflex’s image cropping software.
It is Perfect to use and to integrate into my project but it contains some problems that make the user experience a bit bad, for example, the user has to upload images through the web viewer, and it also contains some buttons like back, menu, and others which is not needed and can create problems, these buttons are also uneditable as the cropping software is outsourced.

Instead, I made a simple HTML extension to crop images using Cloudflare’s software, it is almost perfect as it receives images from post messages from the app (no need to upload through web-viewer), and it also does not contain other useless buttons, just the image cropper, but the problem is that it only receives the image from the post message, but cropping software doesn’t shows, there are also few more issues which would be uncovered after this one is resolved, is there any issue in code?
I also didn’t integrate the thunkableWebviewerExtension.js file, is this necessary?
Extension:https://whoocoderscropper.w3spaces.com/

HTML:






Whoocoder's cropping Software




Whoocoder's cropping Softwarer










Crop Image





        var cropper; // Define cropper variable globally

        ThunkableWebviewerExtension.receiveMessage(function(message) {
            console.log("Received message from Thunkable app:", message);
            var img = new Image();
            img.onload = function() {
                var canvas = document.getElementById('croppedImage');
                var ctx = canvas.getContext('2d');
                ctx.canvas.width = img.width;
                ctx.canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                canvas.style.display = 'block';
                // Initialize Cropper.js
                cropper = new Cropper(canvas, {
                    viewMode: 1 // Set view mode as needed
                });
            };
            img.src = message;
        });

        // Function to crop the image
        function cropImage() {
            var canvas = document.getElementById('croppedImage');
            var croppedCanvas = cropper.getCroppedCanvas();
            var croppedDataUrl = croppedCanvas.toDataURL();
            console.log("Cropped image data URL:", croppedDataUrl);
            ThunkableWebviewerExtension.postMessage(croppedDataUrl);
        }

        // Add event listener to file input
        document.getElementById('fileInput').addEventListener('change', loadFile);

        // Function to load the selected image into Cropper.js
        function loadFile(event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = function(){
                console.log("Image loaded:", reader.result);
                ThunkableWebviewerExtension.postMessage(reader.result);
            };
            reader.readAsDataURL(file);
        }




Thanks, whoocoder

8 posts - 3 participants