-
-
Save PtruckStar/33a13917d1d5d9187fcc2e5e02bb6ec7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// These three lines demonstrate how this code works. | |
let img = await Photos.fromLibrary() | |
let newImg = await processImage(img) | |
QuickLook.present(newImg) | |
// 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 = img.naturalWidth; | |
const h = img.naturalHeight; | |
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 ); | |
context.drawImage( img, 0, 0 ); | |
// 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) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment