Use an alternative implementation of Image.toBitmap for web target (#917

)

`Bitmap.makeFromImage` is faster than `canvas.drawImage` on web:

With `canvas.drawImage`:
First call: 44ms; Second call: 14ms; Third call: 16ms; (for 256x256 PNG
image)


With `Bitmap.makeFromImage`:
First call: 9.92ms; Second call: 1.88ms; Third call: 1.63ms; (for
256x256 PNG image)

Please see a comment in the code for more details.

---------

Co-authored-by: Oleksandr Karpovich <[email protected]>
Co-authored-by: Igor Demin <[email protected]>

compose/ui/ui-graphics/build.gradle

@@ -98,6 +98,10 @@ if(AndroidXComposePlugin.isMultiplatformEnabled(project)) {
                 }
             }
 
+            skikoExcludingWebMain {
+                dependsOn(skikoMain)
+            }
+
             jsNativeMain.dependsOn(skikoMain)
 
             jsWasmMain.dependsOn(jsNativeMain)
@@ -122,7 +126,7 @@ if(AndroidXComposePlugin.isMultiplatformEnabled(project)) {
             }
 
             desktopMain {
-                dependsOn skikoMain
+                dependsOn skikoExcludingWebMain
                 dependencies {
                     implementation(libs.kotlinStdlib)
                     implementation(libs.kotlinStdlibJdk8)
@@ -136,6 +140,7 @@ if(AndroidXComposePlugin.isMultiplatformEnabled(project)) {
             }
 
             nativeMain.dependsOn(jsNativeMain)
+            nativeMain.dependsOn(skikoExcludingWebMain)
 
             // TODO(b/214407011): These dependencies leak into instrumented tests as well. If you
             //  need to add Robolectric (which must be kept out of androidAndroidTest), use a top

compose/ui/ui-graphics/src/jsWasmMain/kotlin/androidx/compose/ui/graphics/Actuals.jsWasm.kt

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.ui.graphics
+
+import org.jetbrains.skia.Bitmap
+import org.jetbrains.skia.ColorAlphaType
+import org.jetbrains.skia.Image
+import org.jetbrains.skia.ImageInfo
+
+/*
+     The default implementation (used for all but web) based on `canvas.drawImage` call is slow for web:
+     First call: 44ms; Second call: 14ms; Third call: 16ms; (for 256x256 PNG image)
+     The profiler showed such calls tree (can be obtained using debug skiko):
+
+     org_jetbrains_skia_Canvas__1nDrawImageRect - 33.21ms / 0ms
+       - SkCodec::getPixels - 6.92ms / 0.13ms
+       - SkDraw::drawBitmap - 22.29ms / 0.2ms
+        - SkRasterPipeline::compile - 17.92 ms / 0ms
+            - portable::start_pipeline - 17.92ms / 0 ms
+                - portable::load_8888 ...
+
+       The most top functions from a Bottom-Up view in Chrome profiler:
+       Self time / Total time  ::: function name
+       5.5ms 15.9% / 6.8ms 19.3% ::: portable::srcover_rgba_8888(...)
+       2.6ms 7.5% / 14.1ms 40.5% ::: portable::clamp_01(...)
+       2.5ms 7.2% / 17ms 48.7% ::: portable::load_8888(...)
+       1.9ms 5.5% / 9.0ms 25.8% ::: portable::swap_rb(...)
+       1.5ms 4.3% / 1.5ms 4.3% ::: portable::RGBA_to_rgbA_portable(...)
+       1.2ms 3.5% / 1.3ms 3.8% ::: baseline::exec_ops(...)
+       ___
+
+       Therefore, we can use an alternative implementation - `Bitmap.makeFromImage`:
+       First call: 9.92ms; Second call: 1.88ms; Third call: 1.63ms; (for 256x256 PNG image)
+       We don't use it as a default, because it's slower for non-web targets.
+
+       Note: The default implementation creates a Bitmap-backed canvas.
+       Using an actual (on-screen) canvas is better on web,
+       but it doesn't serve the purpose of this function.
+ */
+internal actual fun Image.toBitmap(): Bitmap {
+    val bitmap = Bitmap.makeFromImage(this)
+    bitmap.setImmutable()
+    return bitmap
+}

compose/ui/ui-graphics/src/skikoExcludingWebMain/kotlin/androidx/compose/ui/graphics/Actuals.skikoExcludingWeb.kt

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2020 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.ui.graphics
+
+import org.jetbrains.skia.Bitmap
+import org.jetbrains.skia.ColorAlphaType
+import org.jetbrains.skia.Image
+import org.jetbrains.skia.ImageInfo
+
+/*
+   We use this implementation for non-web targets only. It's faster than `Bitmap.fromImage`.
+   The difference becomes noticeable when running a loop of 100 calls.
+   On Desktop/JVM:
+   11 ms for the current (default) implementation vs ~50ms for Bitmap.fromImage.
+   
+   The implementation for web uses `Bitmap.fromImage`, see Actuals.jsWasm.kt
+*/
+internal  actual fun Image.toBitmap(): Bitmap {
+    val bitmap = Bitmap()
+    bitmap.allocPixels(ImageInfo.makeN32(width, height, ColorAlphaType.PREMUL))
+    val canvas = org.jetbrains.skia.Canvas(bitmap)
+    canvas.drawImage(this, 0f, 0f)
+    bitmap.setImmutable()
+    return bitmap
+}

compose/ui/ui-graphics/src/skikoMain/kotlin/androidx/compose/ui/graphics/SkiaImageAsset.skiko.kt

@@ -38,14 +38,9 @@ fun Bitmap.asComposeImageBitmap(): ImageBitmap = SkiaBackedImageBitmap(this)
  */
 fun Image.toComposeImageBitmap(): ImageBitmap = SkiaBackedImageBitmap(toBitmap())
 
-private fun Image.toBitmap(): Bitmap {
-    val bitmap = Bitmap()
-    bitmap.allocPixels(ImageInfo.makeN32(width, height, ColorAlphaType.PREMUL))
-    val canvas = org.jetbrains.skia.Canvas(bitmap)
-    canvas.drawImage(this, 0f, 0f)
-    bitmap.setImmutable()
-    return bitmap
-}
+// Split into expect/actual to use a faster implementation for web
+// See web implementation for details and the reason.
+internal expect fun Image.toBitmap(): Bitmap
 
 internal actual fun ActualImageBitmap(
     width: Int,