Merge pull request #327 from Brooooooklyn/emoji-test

test: add emoji test

.gitattributes

@@ -0,0 +1 @@
+fonts/AppleColorEmoji@2x.ttf filter=lfs diff=lfs merge=lfs -text

.github/workflows/CI.yaml

@@ -86,6 +86,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           submodules: true
+          lfs: true
 
       - name: Setup node
         uses: actions/setup-node@v2
@@ -176,6 +177,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           submodules: true
+          lfs: true
 
       - name: Setup node
         uses: actions/setup-node@v2
@@ -226,6 +228,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          lfs: true
 
       - name: Setup node
         uses: actions/setup-node@v2
@@ -276,6 +280,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
+        with:
+          lfs: true
 
       - name: Setup node
         uses: actions/setup-node@v2
@@ -328,6 +334,8 @@ jobs:
       - run: docker run --rm --privileged multiarch/qemu-user-static:register --reset
 
       - uses: actions/checkout@v2
+        with:
+          lfs: true
 
       - name: Download artifacts
         uses: actions/download-artifact@v2
@@ -372,6 +380,8 @@ jobs:
       - run: docker run --rm --privileged multiarch/qemu-user-static:register --reset
 
       - uses: actions/checkout@v2
+        with:
+          lfs: true
 
       - name: Download artifacts
         uses: actions/download-artifact@v2
@@ -415,6 +425,8 @@ jobs:
       - run: docker run --rm --privileged multiarch/qemu-user-static:register --reset
 
       - uses: actions/checkout@v2
+        with:
+          lfs: true
 
       - name: Download artifacts
         uses: actions/download-artifact@v2

.husky/post-checkout

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/post-checkout.\n"; exit 2; }
+git lfs post-checkout "$@"

.husky/post-commit

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/post-commit.\n"; exit 2; }
+git lfs post-commit "$@"

.husky/post-merge

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/post-merge.\n"; exit 2; }
+git lfs post-merge "$@"

.husky/pre-push

@@ -0,0 +1,3 @@
+#!/bin/sh
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.\n"; exit 2; }
+git lfs pre-push "$@"

README-zh.md

@@ -71,6 +71,35 @@ main()
 
 ![](./example/simple.png)
 
+## Emoji 文字
+
+```js
+const { writeFileSync } = require('fs')
+const { join } = require('path')
+
+const { createCanvas, GlobalFonts } = require('../index.js')
+
+GlobalFonts.registerFromPath(join(__dirname, '..', 'fonts', 'AppleColorEmoji@2x.ttf'), 'Apple Emoji')
+GlobalFonts.registerFromPath(join(__dirname, '..', '__test__', 'fonts', 'COLRv1.ttf'), 'COLRv1')
+
+console.info(GlobalFonts.families)
+
+const canvas = createCanvas(760, 360)
+const ctx = canvas.getContext('2d')
+
+ctx.font = '50px Apple Emoji'
+ctx.strokeText('😀😃😄😁😆😅😂🤣☺️😊😊😇', 50, 150)
+
+ctx.font = '100px COLRv1'
+ctx.fillText('abc', 50, 300)
+
+const b = canvas.toBuffer('image/png')
+
+writeFileSync(join(__dirname, 'draw-emoji.png'), b)
+```
+
+![](./example/draw-emoji.png)
+
 # 性能
 
 [benchmark](./benchmark) 代码.

README.md

@@ -71,6 +71,35 @@ main()
 
 ![](./example/simple.png)
 
+## Emoji text
+
+```js
+const { writeFileSync } = require('fs')
+const { join } = require('path')
+
+const { createCanvas, GlobalFonts } = require('../index.js')
+
+GlobalFonts.registerFromPath(join(__dirname, '..', 'fonts', 'AppleColorEmoji@2x.ttf'), 'Apple Emoji')
+GlobalFonts.registerFromPath(join(__dirname, '..', '__test__', 'fonts', 'COLRv1.ttf'), 'COLRv1')
+
+console.info(GlobalFonts.families)
+
+const canvas = createCanvas(760, 360)
+const ctx = canvas.getContext('2d')
+
+ctx.font = '50px Apple Emoji'
+ctx.strokeText('😀😃😄😁😆😅😂🤣☺️😊😊😇', 50, 150)
+
+ctx.font = '100px COLRv1'
+ctx.fillText('abc', 50, 300)
+
+const b = canvas.toBuffer('image/png')
+
+writeFileSync(join(__dirname, 'draw-emoji.png'), b)
+```
+
+![](./example/draw-emoji.png)
+
 # Performance
 
 See [benchmark](./benchmark) for benchmark code.

__test__/draw.spec.ts

@@ -1,5 +1,7 @@
 import { promises, readFileSync } from 'fs'
+import { platform } from 'os'
 import { join } from 'path'
+
 import ava, { TestInterface } from 'ava'
 import PNG from '@jimp/png'
 
@@ -418,6 +420,14 @@ test('fillText-AA', async (t) => {
   await snapshotImage(t, { canvas, ctx }, 'png', 3.2)
 })
 
+test('fillText-COLRv1', async (t) => {
+  const { ctx, canvas } = t.context
+  GlobalFonts.registerFromPath(join(__dirname, 'fonts', 'COLRv1.ttf'), 'Colrv1')
+  ctx.font = '100px Colrv1'
+  ctx.fillText('abc', 50, 100)
+  await snapshotImage(t, { canvas, ctx }, 'png', 0.5)
+})
+
 test('getContextAttributes', (t) => {
   const defaultCtx = t.context.ctx
   const defaultAttrs = defaultCtx.getContextAttributes()
@@ -770,6 +780,19 @@ test('strokeText', async (t) => {
   await snapshotImage(t, { canvas, ctx }, 'png', 3.5)
 })
 
+test('strokeText-emoji', async (t) => {
+  if (platform() === 'darwin') {
+    t.pass('macOS definitely supports emoji')
+    return
+  }
+  const { ctx } = t.context
+  GlobalFonts.registerFromPath(join(__dirname, '..', 'fonts', 'AppleColorEmoji@2x.ttf'))
+  ctx.font = '50px Apple Color Emoji'
+  ctx.strokeText('😀😃😄😁😆😅', 50, 100)
+  ctx.fillText('😂🤣☺️😊😊😇', 50, 220)
+  await snapshotImage(t)
+})
+
 test('transform', async (t) => {
   const { ctx } = t.context
   ctx.transform(1, 0.2, 0.8, 1, 0, 0)

__test__/image-snapshot.ts

@@ -12,7 +12,7 @@ export async function snapshotImage<C>(
   t: ExecutionContext<C>,
   context = t.context,
   type: 'png' | 'jpeg' | 'webp' = 'png',
-  differentRatio = 0.01,
+  differentRatio = 0.015,
 ) {
   // @ts-expect-error
   const { canvas } = context

example/.gitignore

@@ -1,2 +1,2 @@
 draw-text.png
-draw-text-with-baseline.png
+draw-text-with-baseline.png

example/draw-emoji.js

@@ -0,0 +1,22 @@
+const { writeFileSync } = require('fs')
+const { join } = require('path')
+
+const { createCanvas, GlobalFonts } = require('../index.js')
+
+GlobalFonts.registerFromPath(join(__dirname, '..', 'fonts', 'AppleColorEmoji@2x.ttf'), 'Apple Emoji')
+GlobalFonts.registerFromPath(join(__dirname, '..', '__test__', 'fonts', 'COLRv1.ttf'), 'COLRv1')
+
+console.info(GlobalFonts.families)
+
+const canvas = createCanvas(760, 360)
+const ctx = canvas.getContext('2d')
+
+ctx.font = '50px Apple Emoji'
+ctx.strokeText('😀😃😄😁😆😅😂🤣☺️😊😊😇', 50, 150)
+
+ctx.font = '100px COLRv1'
+ctx.fillText('abc', 50, 300)
+
+const b = canvas.toBuffer('image/png')
+
+writeFileSync(join(__dirname, 'draw-emoji.png'), b)

scripts/build-skia.js

@@ -45,13 +45,14 @@ const GN_ARGS = [
   `skia_enable_skshaper=true`,
   `skia_enable_tools=false`,
   `skia_enable_svg=true`,
+  `skia_enable_skparagraph=true`,
+  `skia_enable_sktext=true`,
+  `skia_pdf_subset_harfbuzz=true`,
   `skia_use_expat=true`,
   `skia_use_gl=false`,
   `skia_use_harfbuzz=true`,
-  `skia_pdf_subset_harfbuzz=true`,
-  `skia_use_sfntly=false`,
-  `skia_enable_skparagraph=true`,
   `skia_use_icu=true`,
+  `skia_use_sfntly=false`,
   `skia_use_libgifcodec=true`,
   `skia_use_libheif=true`,
   `skia_use_libjpeg_turbo_decode=true`,

skia-c/skia_c.cpp

@@ -127,7 +127,7 @@ extern "C"
     SkPaint paint;
     paint.setAlpha(SK_AlphaOPAQUE);
 
-    const auto sampling = SkSamplingOptions(SkFilterQuality::kLow_SkFilterQuality);
+    const auto sampling = SkSamplingOptions();
     // The original surface draws itself to the copy's canvas.
     SURFACE_CAST->draw(copy->getCanvas(), -(SkScalar)x, -(SkScalar)y, sampling, &paint);
 
@@ -282,7 +282,7 @@ extern "C"
     SkPaint paint;
     paint.setAlpha(alpha);
     paint.setBlendMode((SkBlendMode)blend_mode);
-    const auto sampling = SkSamplingOptions((SkFilterQuality)filter_quality);
+    const auto sampling = SkSamplingOptions();
     CANVAS_CAST->drawImage(image, left, top, sampling, &paint);
   }
 
@@ -296,7 +296,7 @@ extern "C"
     SkPaint paint;
     auto src = SkRect::MakeXYWH(0, 0, image->width(), image->height());
     auto dst = SkRect::MakeXYWH(x, y, w, h);
-    const auto sampling = SkSamplingOptions((SkFilterQuality)filter_quality);
+    const auto sampling = SkSamplingOptions();
     CANVAS_CAST->drawImageRect(image, src, dst, sampling, &paint, SkCanvas::kFast_SrcRectConstraint);
   }
 
@@ -986,7 +986,7 @@ extern "C"
   {
     auto skia_tile_mode = SkTileMode::kRepeat;
     const auto ts = conv_from_transform(c_ts);
-    const auto sampling_options = new SkSamplingOptions((SkFilterQuality)filter_quality);
+    const auto sampling_options = new SkSamplingOptions();
     sk_sp<SkImage> image = SURFACE_CAST->makeImageSnapshot();
     auto shader = image->makeShader(
                            skia_tile_mode,