Add ImageFilters::MakeShader() to CanvasKit

Change-Id: I1c5cd1b7404b52ecb5a324b212d8913e3376c3c7
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/558257
Reviewed-by: Kevin Lubick <kjlubick@google.com>

modules/canvaskit/CHANGELOG.md

@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
  - The following ImageFilter factory methods: `MakeBlend`, `MakeDilate`, `MakeDisplacementMap`, 
-   `MakeDropShadow`, `MakeDropShadowOnly`, `MakeErode`, `MakeImage`, and `MakeOffset`.
+   `MakeDropShadow`, `MakeDropShadowOnly`, `MakeErode`, `MakeImage`, `MakeOffset`, and `MakeShader`.
  - The `MakeLuma` ColorFilter factory method.
 
 ### Changed

modules/canvaskit/canvaskit_bindings.cpp

@@ -1543,6 +1543,9 @@ EMSCRIPTEN_BINDINGS(Skia) {
             return SkImageFilters::DisplacementMap(xChannelSelector, yChannelSelector,
                                                    scale, displacement, color);
         }))
+        .class_function("MakeShader", optional_override([](sk_sp<SkShader> shader)->sk_sp<SkImageFilter> {
+            return SkImageFilters::Shader(shader);
+        }))
         .class_function("_MakeDropShadow", optional_override([](SkScalar dx, SkScalar dy,
                                                                SkScalar sigmaX, SkScalar sigmaY,
                                                                WASMPointerF32 cPtr, sk_sp<SkImageFilter> input)->sk_sp<SkImageFilter> {

modules/canvaskit/npm_build/types/canvaskit-wasm-tests.ts

@@ -308,8 +308,8 @@ function imageTests(CK: CanvasKit, imgElement?: HTMLImageElement) {
     img.delete();
 }
 
-function imageFilterTests(CK: CanvasKit, colorFilter?: ColorFilter, img?: Image) {
-    if (!colorFilter || !img) return;
+function imageFilterTests(CK: CanvasKit, colorFilter?: ColorFilter, img?: Image, shader?: Shader) {
+    if (!colorFilter || !img || !shader) return;
     const imgf = CK.ImageFilter; // less typing
     const filter = imgf.MakeBlur(2, 4, CK.TileMode.Mirror, null); // $ExpectType ImageFilter
     const filter1 = imgf.MakeBlur(2, 4, CK.TileMode.Decal, filter); // $ExpectType ImageFilter
@@ -347,6 +347,7 @@ function imageFilterTests(CK: CanvasKit, colorFilter?: ColorFilter, img?: Image)
 
     let filter16 = imgf.MakeOffset(5, 3, null); // $ExpectType ImageFilter
     filter16 = imgf.MakeOffset(-100.3, -18, filter16);
+    imgf.MakeShader(shader); // $ExpectType ImageFilter
 }
 
 function fontTests(CK: CanvasKit, face?: Typeface, paint?: Paint) {

modules/canvaskit/npm_build/types/index.d.ts

@@ -3490,6 +3490,14 @@ export interface ImageFilterFactory {
      *  @param input    The input that will be moved, if null, will use the dynamic source image.
      */
     MakeOffset(dx: number, dy: number, input: ImageFilter | null): ImageFilter;
+
+
+    /**
+     * Transforms a shader into an image filter
+     *
+     * @param shader - The Shader to be transformed
+     */
+   MakeShader(shader: Shader): ImageFilter;
 }
 
 /**

modules/canvaskit/tests/core.spec.js

@@ -1803,4 +1803,24 @@ describe('Core canvas behavior', () => {
         paint.delete();
         offset.delete();
     }, '/assets/mandrill_512.png');
+
+    gm('ImageFilter_MakeShader', (canvas) => {
+        canvas.clear(CanvasKit.WHITE);
+
+        const rt = CanvasKit.RuntimeEffect.Make(`
+uniform float4 color;
+half4 main(vec2 fragcoord) {
+    return vec4(color);
+}
+`);
+        const shader = rt.makeShader([0.0, 0.0, 1.0, 0.5]);
+        const filter = CanvasKit.ImageFilter.MakeShader(shader);
+        const paint = new CanvasKit.Paint();
+        paint.setImageFilter(filter);
+        canvas.drawPaint(paint);
+        paint.delete();
+        filter.delete();
+        shader.delete();
+        rt.delete();
+    });
 });