I am trying to display a cropped part of a panoramic-like image in a widget.
The image is located here: https://i.ibb.co/bWGv3Qd/10-10-00-h572.jpg
I found a useful script snippet to crop an image with a canvas inside a webview - so far so good.
If I display the cropped image with QuickLook.present() inside the app, the image is cropped and displayed as desired.
But: if I display the image inside a ListWidget via widget.backgroundImage, two strange things happen:
- the image is not cropped at all but the original one from the URL stated above is shown
- the image is not displayed throughout the whole widget background but just in a small upper left corner. The image dimension are set correctly though.
Does anyone has a clue whats going on here?
The image inside the app/inside the widget looks like this:
(I added the image’s width and height as text to prove the dimensions)
As you can see: the image in the app is a cropped version of the upper left part of the full image - which is displayed in the widget.
Code of the script:
let fullSizeImage = await new Request("https://i.ibb.co/bWGv3Qd/10-10-00-h572.jpg").loadImage()
let croppedImage = await processImage(fullSizeImage)
if (config.runsInWidget) {
const widget = await createWidget(croppedImage)
Script.setWidget(widget)
} else {
QuickLook.present(croppedImage)
}
Script.complete()
async function createWidget(croppedImage) {
let result = new ListWidget();
result.backgroundImage = croppedImage
result.addText(croppedImage.size.width.toString());
result.addText(croppedImage.size.height.toString());
//result.addImage(croppedImage);
return result;
}
// This function takes an image and returns a processed image.
async function processImage(image) {
const imageId = "imageId"
const canvasId = "canvasId"
const js = `
// Set up the canvas.
const img = document.getElementById("${imageId}");
const canvas = document.getElementById("${canvasId}");
const w = 987;
const h = 465;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
canvas.width = w;
canvas.height = h;
const context = canvas.getContext("2d");
context.clearRect( 0, 0, w, h );
//image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight
context.drawImage( img, 0, 0, w, h, 0,0, w,h );
// Image modifications go here. This desaturates the image.
//context.globalCompositeOperation = "saturation";
//context.fillStyle = "hsl(0,0%,50%)";
//context.fillRect(0, 0, w, h);
// Return a base64 representation.
canvas.toDataURL();
`
// Convert the images and create the HTML.
let inputData = Data.fromPNG(image).toBase64String()
let html = `
<img id="${imageId}" src="data:image/png;base64,${inputData}" />
<canvas id="${canvasId}" />
`
// Make the web view and get its return value.
let view = new WebView()
await view.loadHTML(html)
let returnValue = await view.evaluateJavaScript(js)
// Remove the data type from the string and convert to data.
let outputDataString = returnValue.slice(returnValue.indexOf(",") + 1)
outputData = Data.fromBase64String(outputDataString)
// Convert to image and return.
return Image.fromData(outputData)
}