Help Regarding Image Cropping html extension

Hi Community!

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

@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:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whoocoder's cropping Software</title>
    <!-- Include Cropper.js stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
</head>
<body>
    <h1>Whoocoder's cropping Softwarer</h1>

    <!-- Input to select an image -->
    <input type="file" id="fileInput" accept="image/*">

    <!-- Display area for the cropped image -->
    <div>
        <canvas id="croppedImage" style="max-width: 100%; display: none;"></canvas>
    </div>

    <!-- Button to trigger cropping -->
    <button onclick="cropImage()">Crop Image</button>

    <!-- Include Cropper.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
    <script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"></script>
    <script>
        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);
        }
    </script>
</body>
</html>

Thanks, whoocoder

1 Like

Have you tried asking ChatGPT or Copilot to troubleshoot it?

1 Like

Asked ChatGPT and Blackbox ai many times but the Debugged code they Gave, was not still Working as a Thunkable HTML extension.

I even Integrate the thunkablewebviewerextension.js file in the Extension, still nothing Changed

 var ThunkableWebviewerExtension = (function () {
  const postMessageToWebview = (message) => {
    if (window.ReactNativeWebView) {
      window.ReactNativeWebView.postMessage(message);
    } else {
      window.parent.postMessage(message, '*');
    }
  };

  const getReceiveMessageCallback = (fxn, hasReturnValue) => (event) => {
    if (typeof fxn === 'function') {
      if (event.data) {
        let dataObject;
        try {
          dataObject = JSON.parse(event.data);
        } catch (e) {
          // message is not valid json
        }
        if (dataObject && dataObject.type === 'ThunkablePostMessage' && hasReturnValue) {
          fxn(dataObject.message, (returnValue) => {
            const returnMessageObject = { type: 'ThunkablePostMessageReturnValue', uuid: dataObject.uuid, returnValue };
            postMessageToWebview(JSON.stringify(returnMessageObject));
          });
        } else if (!hasReturnValue && (!dataObject || dataObject.type !== 'ThunkablePostMessage')) {
          fxn(event.data);
        }
      }
    }
  };

  return {
    postMessage: postMessageToWebview,
    receiveMessage: function(fxn) {
      const callbackFunction = getReceiveMessageCallback(fxn, false);
      document.addEventListener('message', callbackFunction, false);
      window.addEventListener('message', callbackFunction, false);
    },
    receiveMessageWithReturnValue: function(fxn) {
      const callbackFunction = getReceiveMessageCallback(fxn, true);
      document.addEventListener('message', callbackFunction, false);
      window.addEventListener('message', callbackFunction, false);
    },
  };
})();

I wish I could help you with this but the reason I suggested using AI is because I’m not that skilled in scripting.

1 Like

Okay, I don’t think that using AI like ChatGPT can help me specifically in Thunkable questions, but it is very good for troubleshooting problems while developing in other code-based development software like flutter and android studio.

2 Likes

Could Somenone Reply?

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.