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