# Help Regarding Image Cropping html extension **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** webviewer\ **Created:** [March 30, 2024, 3:34am UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234 "2024-03-30T03:34:19Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\ **Post date:** [March 30, 2024, 3:34am UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/1 "2024-03-30T03:34:20Z")
_ **Hi Community!** _ I want help Regarding integrating an Image Cropping HTML Extension in Thunkable, > [@Crop images with fingers](https://community.thunkable.com/t/crop-images-with-fingers/2025045): > > 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/](https://whoocoderscropper.w3spaces.com/) HTML: ```auto Whoocoder's cropping Software

Whoocoder's cropping Softwarer

``` _ **Thanks, whoocoder** _ ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 30, 2024, 8:45pm UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/2 "2024-03-30T20:45:13Z")
Have you tried asking ChatGPT or Copilot to troubleshoot it? ---
**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\ **Post date:** [March 31, 2024, 1:10am UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/3 "2024-03-31T01:10:17Z")
Asked ChatGPT and Blackbox ai many times but the Debugged code they Gave, was not still Working as a Thunkable HTML extension. ---
**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\ **Post date:** [March 31, 2024, 1:11am UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/4 "2024-03-31T01:11:24Z")
I even Integrate the thunkablewebviewerextension.js file in the Extension, still nothing Changed ```auto 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); }, }; })(); ``` ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 31, 2024, 4:28pm UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/5 "2024-03-31T16:28:07Z")
I wish I could help you with this but the reason I suggested using AI is because I’m not that skilled in scripting. ---
**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\ **Post date:** [April 1, 2024, 12:49am UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/6 "2024-04-01T00:49:54Z")
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. ---
**Author:** ![pacecode](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/pacecode/32/209017_2.png) [@pacecode](https://community.thunkable.com/u/pacecode)\ **Post date:** [April 2, 2024, 9:53am UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/7 "2024-04-02T09:53:45Z")
Could Somenone Reply? ---
**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\ **Post date:** [July 1, 2024, 9:54am UTC](https://community.thunkable.com/t/help-regarding-image-cropping-html-extension/2920234/8 "2024-07-01T09:54:24Z")
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.