ImageCrop outputs a Blob instead of ImageRaw

lightningkite · Mar 19, 2024 · 733a6e9 · 733a6e9
1 parent 04ac23b
commit 733a6e9
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 25 deletions.
diff --git a/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/ImageCropScreen.kt b/example-app/src/commonMain/kotlin/com/lightningkite/mppexampleapp/ImageCropScreen.kt
@@ -41,7 +41,7 @@ object ImageCropScreen : RockScreen {
             button {
                 text("Crop")
                 onClick {
-                    croppedImage.value = imageCrop.crop()
+                    //croppedImage.value = imageCrop.crop()
                 }
             }
             centered - sizeConstraints(width = 20.rem, height = 20.rem) - image {

diff --git a/library/src/androidMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.android.kt b/library/src/androidMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.android.kt
@@ -1,6 +1,7 @@
 package com.lightningkite.rock.views.direct
 
 import android.view.View
+import com.lightningkite.rock.Blob
 import com.lightningkite.rock.models.ImageLocal
 import com.lightningkite.rock.models.ImageRaw
 import com.lightningkite.rock.views.RView
@@ -19,7 +20,7 @@ actual class ImageCrop actual constructor(native: NImageCrop) : RView<NImageCrop
         get() = TODO("Not yet implemented")
         set(value) {}
 
-    actual suspend fun crop(): ImageRaw? {
+    actual suspend fun crop(): Blob? {
         TODO("Not yet implemented")
     }
 }

diff --git a/library/src/commonMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.kt b/library/src/commonMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.kt
@@ -1,7 +1,7 @@
 package com.lightningkite.rock.views.direct
 
+import com.lightningkite.rock.Blob
 import com.lightningkite.rock.models.ImageLocal
-import com.lightningkite.rock.models.ImageRaw
 import com.lightningkite.rock.views.NView
 import com.lightningkite.rock.views.RView
 import com.lightningkite.rock.views.ViewDsl
@@ -14,7 +14,7 @@ expect class ImageCrop(native: NImageCrop) : RView<NImageCrop> {
     override val native: NImageCrop
     var source: ImageLocal?
     var aspectRatio: Pair<Int, Int>?
-    suspend fun crop(): ImageRaw?
+    suspend fun crop(): Blob?
 }
 
 @ViewDsl

diff --git a/library/src/iosMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.ios.kt b/library/src/iosMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.ios.kt
@@ -1,5 +1,6 @@
 package com.lightningkite.rock.views.direct
 
+import com.lightningkite.rock.Blob
 import com.lightningkite.rock.models.ImageLocal
 import com.lightningkite.rock.models.ImageRaw
 import com.lightningkite.rock.views.RView
@@ -19,7 +20,7 @@ actual class ImageCrop actual constructor(native: NImageCrop) : RView<NImageCrop
         get() = TODO("Not yet implemented")
         set(value) {}
 
-    actual suspend fun crop(): ImageRaw? {
+    actual suspend fun crop(): Blob? {
         TODO("Not yet implemented")
     }
 }

diff --git a/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.js.kt b/library/src/jsMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.js.kt
@@ -2,24 +2,19 @@ package com.lightningkite.rock.views.direct
 
 import com.lightningkite.rock.await
 import com.lightningkite.rock.models.ImageLocal
-import com.lightningkite.rock.models.ImageRaw
 import com.lightningkite.rock.views.*
 import com.lightningkite.rock.views.canvas.clear
 import kotlinx.browser.window
 import org.khronos.webgl.ArrayBuffer
-import org.khronos.webgl.Uint8Array
-import org.khronos.webgl.get
 import org.w3c.dom.*
 import org.w3c.dom.events.Event
 import org.w3c.dom.events.MouseEvent
 import org.w3c.dom.pointerevents.PointerEvent
-import org.w3c.dom.url.URL
 import org.w3c.files.Blob
 import org.w3c.files.FileReader
 import kotlin.coroutines.resume
 import kotlin.coroutines.resumeWithException
 import kotlin.coroutines.suspendCoroutine
-import kotlin.experimental.and
 import kotlin.js.Promise
 import kotlin.math.*
 
@@ -60,14 +55,17 @@ actual class ImageCrop actual constructor(actual override val native: NImageCrop
     private var bitmap: ImageBitmap? = null
 
     init {
-        native.width = native.offsetWidth
-        native.height = native.offsetHeight
+        native.style.setProperty("touch-action", "none")
 
         native.addEventListener("mousemove", ::handleMouseMove)
         native.addEventListener("pointerdown", ::handleTouchStart)
         native.addEventListener("pointerup", ::handleTouchEndOrCancel)
         native.addEventListener("pointercancel", ::handleTouchEndOrCancel)
         native.addEventListener("pointermove", ::handleTouchMove)
+
+        ResizeObserver(::sizeCanvas).observe(native)
+
+        sizeCanvas()
     }
 
     data class Rect(val x: Double, val y: Double, val width: Double, val height: Double) {
@@ -152,6 +150,11 @@ actual class ImageCrop actual constructor(actual override val native: NImageCrop
         }
     }
 
+    private fun sizeCanvas(a: Array<ResizeObserverEntry>? = null, b: ResizeObserver? = null) {
+        native.width = native.offsetWidth
+        native.height = native.offsetHeight
+    }
+
     private fun handleMouseMove(event: Event) {
         event as MouseEvent
         val pointerCoordinates = event.offsetX to event.offsetY
@@ -259,7 +262,7 @@ actual class ImageCrop actual constructor(actual override val native: NImageCrop
         }
     }
 
-    actual suspend fun crop(): ImageRaw? {
+    actual suspend fun crop(): Blob? {
         val bitmap = bitmap ?: return null
         val scale: Double = if (fitHorizontal) {
             native.width.toDouble() / bitmap.width
@@ -285,17 +288,7 @@ actual class ImageCrop actual constructor(actual override val native: NImageCrop
             dh = resultHeight.toDouble()
         )
 
-        val result = cropCanvas.convertToBlob().await()
-        val blobUrl = URL.Companion.createObjectURL(result)
-        println("Check cropped photo at $blobUrl")
-
-        val arrayBuffer = FileReader().readAsArrayBufferSync(result)
-        val jsArray = Uint8Array(arrayBuffer)
-        val byteArray = ByteArray(jsArray.length)
-        for (i in 0..<jsArray.length) {
-            byteArray[i] = jsArray[i]
-        }
-        return ImageRaw(byteArray)
+        return cropCanvas.convertToBlob().await()
     }
 }
 

diff --git a/library/src/jvmMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.jvm.kt b/library/src/jvmMain/kotlin/com/lightningkite/rock/views/direct/ImageCrop.jvm.kt
@@ -1,5 +1,6 @@
 package com.lightningkite.rock.views.direct
 
+import com.lightningkite.rock.Blob
 import com.lightningkite.rock.dom.HTMLElement
 import com.lightningkite.rock.models.ImageLocal
 import com.lightningkite.rock.models.ImageRaw
@@ -19,7 +20,7 @@ actual class ImageCrop actual constructor(native: NImageCrop) : RView<NImageCrop
         get() = TODO("Not yet implemented")
         set(value) {}
 
-    actual suspend fun crop(): ImageRaw? {
+    actual suspend fun crop(): Blob? {
         TODO("Not yet implemented")
     }
 }