Merge pull request #343 from Brooooooklyn/fabric

Fabric.js compatible

CHANGELOG.md

@@ -1,16 +1,12 @@
 ## [0.1.5](https://github.com/Brooooooklyn/canvas/compare/v0.1.4...v0.1.5) (2021-08-13)
 
-
 ### Bug Fixes
 
-* default value of FilterQuality in SamplingOptions should be high ([389aa26](https://github.com/Brooooooklyn/canvas/commit/389aa26fda79dfca15b6f2d87fbd03fe92f28758))
-
+- default value of FilterQuality in SamplingOptions should be high ([389aa26](https://github.com/Brooooooklyn/canvas/commit/389aa26fda79dfca15b6f2d87fbd03fe92f28758))
 
 ### Features
 
-* add resize SVG demo ([bf8388d](https://github.com/Brooooooklyn/canvas/commit/bf8388ddab06474a01362829437bcfc7df4bd248))
-
-
+- add resize SVG demo ([bf8388d](https://github.com/Brooooooklyn/canvas/commit/bf8388ddab06474a01362829437bcfc7df4bd248))
 
 ## [0.1.4](https://github.com/Brooooooklyn/canvas/compare/v0.1.3...v0.1.4) (2021-08-11)
 

Cargo.toml

@@ -23,12 +23,14 @@ serde_json = "1"
 thiserror = "1.0"
 
 [target.'cfg(all(target_arch = "x86_64", not(target_env = "musl")))'.dependencies]
-mimalloc = {version = "0.1"}
+mimalloc-rust = "0.1"
 
 [build-dependencies]
 cc = "1"
 napi-build = "1"
 
 [profile.release]
+codegen-units = 1
 lto = true
+panic = "unwind"
 strip = 'symbols'

__test__/canvas-class.spec.ts

@@ -0,0 +1,7 @@
+import test from 'ava'
+
+import { createCanvas, Canvas } from '../index'
+
+test('Canvas constructor should be equal to createCanvas', (t) => {
+  t.deepEqual(createCanvas(200, 100), new Canvas(200, 100))
+})

__test__/draw.spec.ts

@@ -364,6 +364,38 @@ test('drawImage-svg without width height should be empty image', async (t) => {
   t.deepEqual(outputData.data, Buffer.alloc(outputData.width * outputData.height * 4, 0))
 })
 
+test('draw-image-svg-noto-emoji', async (t) => {
+  const { ctx } = t.context
+  const filePath = './notoemoji-person.svg'
+  const file = await promises.readFile(join(__dirname, filePath))
+  const image = new Image()
+  image.src = file
+  ctx.drawImage(image, 0, 0)
+  await snapshotImage(t)
+})
+
+test('drawImage-another-Canvas', async (t) => {
+  const { ctx } = t.context
+
+  ctx.fillStyle = 'hotpink'
+  ctx.fillRect(10, 10, 100, 100)
+
+  const anotherCanvas = createCanvas(200, 200)
+  const anotherContext = anotherCanvas.getContext('2d')
+  anotherContext.beginPath()
+  anotherContext.ellipse(80, 80, 50, 75, Math.PI / 4, 0, 2 * Math.PI)
+  anotherContext.stroke()
+
+  // Draw the ellipse's line of reflection
+  anotherContext.beginPath()
+  anotherContext.setLineDash([5, 5])
+  anotherContext.moveTo(10, 150)
+  anotherContext.lineTo(150, 10)
+  anotherContext.stroke()
+  ctx.drawImage(anotherCanvas, 150, 150)
+  await snapshotImage(t)
+})
+
 test('ellipse', async (t) => {
   const { ctx } = t.context
   // Draw the ellipse
@@ -836,19 +868,29 @@ test('transform', async (t) => {
 
 test('translate', async (t) => {
   const { ctx } = t.context
-  drawHouse(ctx)
+  drawTranslate(ctx)
+  await snapshotImage(t)
+})
+
+test('translate-with-transform', async (t) => {
+  const { ctx } = t.context
+  ctx.translate(110, 30)
+  ctx.transform(1, 0, 0, 1, -20, -10)
+  ctx.transform(1, 0, 0, 1, 0, 0)
+  ctx.fillStyle = 'red'
+  ctx.fillRect(-30, -10, 80, 80)
   await snapshotImage(t)
 })
 
 test('webp-output', async (t) => {
   const { ctx } = t.context
-  drawHouse(ctx)
+  drawTranslate(ctx)
   await snapshotImage(t, t.context, 'webp')
 })
 
 test('raw output', async (t) => {
   const { ctx, canvas } = t.context
-  drawHouse(ctx)
+  drawTranslate(ctx)
 
   const output = canvas.data()
   const pngFromCanvas = await canvas.encode('png')
@@ -858,7 +900,7 @@ test('raw output', async (t) => {
 
 test('toDataURL', async (t) => {
   const { ctx, canvas } = t.context
-  drawHouse(ctx)
+  drawTranslate(ctx)
 
   const output = canvas.toDataURL()
   const prefix = 'data:image/png;base64,'
@@ -870,7 +912,7 @@ test('toDataURL', async (t) => {
 
 test('toDataURL with quality', async (t) => {
   const { ctx, canvas } = t.context
-  drawHouse(ctx)
+  drawTranslate(ctx)
 
   const output = canvas.toDataURL('image/jpeg', 20)
   const prefix = 'data:image/jpeg;base64,'
@@ -882,7 +924,7 @@ test('toDataURL with quality', async (t) => {
 
 test('toDataURLAsync', async (t) => {
   const { ctx, canvas } = t.context
-  drawHouse(ctx)
+  drawTranslate(ctx)
   const output = await canvas.toDataURLAsync()
   const prefix = 'data:image/png;base64,'
   t.true(output.startsWith(prefix))
@@ -891,7 +933,7 @@ test('toDataURLAsync', async (t) => {
   t.deepEqual(pngBuffer, await canvas.encode('png'))
 })
 
-function drawHouse(ctx: SKRSContext2D) {
+function drawTranslate(ctx: SKRSContext2D) {
   // Moved square
   ctx.translate(110, 30)
   ctx.fillStyle = 'red'

__test__/image-snapshot.ts

@@ -1,18 +1,20 @@
 import { promises as fs } from 'fs'
 import { join } from 'path'
+import { arch } from 'os'
 
 import PNG from '@jimp/png'
 import JPEG from '@jimp/jpeg'
 import { ExecutionContext } from 'ava'
 
 const png = PNG()
 const jpeg = JPEG()
+const ARCH_NAME = arch()
 
 export async function snapshotImage<C>(
   t: ExecutionContext<C>,
   context = t.context,
   type: 'png' | 'jpeg' | 'webp' = 'png',
-  differentRatio = 0.015,
+  differentRatio = ARCH_NAME === 'x64' ? 0.015 : 0.3,
 ) {
   // @ts-expect-error
   const { canvas } = context
@@ -53,7 +55,6 @@ export async function snapshotImage<C>(
         diffCount++
       }
     })
-    // diff ratio greater than 0.01%
     if (diffCount / existedPixels.length > differentRatio / 100) {
       await writeFailureImage()
       t.fail(`Image bytes is not equal, different ratio is ${((diffCount / existedPixels.length) * 100).toFixed(2)}%`)

__test__/regression.spec.ts

@@ -0,0 +1,42 @@
+import ava, { TestInterface } from 'ava'
+
+import { createCanvas, Canvas, SKRSContext2D } from '../index'
+import { snapshotImage } from './image-snapshot'
+
+const test = ava as TestInterface<{
+  canvas: Canvas
+  ctx: SKRSContext2D
+}>
+
+test.beforeEach((t) => {
+  const canvas = createCanvas(512, 512)
+  t.context.canvas = canvas
+  t.context.ctx = canvas.getContext('2d')!
+})
+
+test('transform-with-state', async (t) => {
+  const canvas = createCanvas(256, 256)
+  const ctx = canvas.getContext('2d')
+  ctx.translate(128.5, 128.5)
+  ctx.scale(1, 1)
+  ctx.clearRect(-128, -128, 256, 256)
+  ctx.beginPath()
+  ctx.moveTo(-52.5, -38.5)
+  ctx.lineTo(52.5, -38.5)
+  ctx.lineTo(52.5, 38.5)
+  ctx.lineTo(-52.5, 38.5)
+  ctx.lineTo(-52.5, -38.5)
+  ctx.closePath()
+  ctx.save()
+  const p = ctx.createLinearGradient(0, 0, 0, 77)
+  p.addColorStop(1, 'rgba(0, 128, 128, 1)')
+  p.addColorStop(0.6, 'rgba(0, 255, 255, 1)')
+  p.addColorStop(0.3, 'rgba(176, 199, 45, 1)')
+  p.addColorStop(0.0, 'rgba(204, 82, 51, 1)')
+  ctx.fillStyle = p
+  ctx.transform(1, 0, 0, 1, -52.5, -38.5)
+  ctx.transform(1, 0, 0, 1, 0, 0)
+  ctx.fill()
+  ctx.restore()
+  await snapshotImage(t, { canvas, ctx })
+})