Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try to fix the encode method default quality issue #418

Merged
merged 1 commit into from
Feb 11, 2022
Merged

Try to fix the encode method default quality issue #418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions example/anime-girl-quality.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
const fs = require('fs').promises
const { join } = require('path')
const { performance } = require('perf_hooks')

const { createCanvas, Image } = require('../index')
/* eslint-disable no-console */

async function main() {
const file = await fs.readFile(join(__dirname, './anime-girl.svg'))

const image = new Image()
image.src = file

const w = 1052
const h = 744

// resize SVG
image.width = w
image.height = h

// create a canvas of the same size as the image
const canvas = createCanvas(w, h)
const ctx = canvas.getContext('2d')

// fill the canvas with the image
ctx.drawImage(image, 0, 0)

const webpData = await canvas.encode('webp')
await fs.writeFile(join(__dirname, 'anime-girl-default.webp'), webpData)

const webpData80 = await canvas.encode('webp', 80)
await fs.writeFile(join(__dirname, 'anime-girl-80.webp'), webpData80)

const webpData92 = await canvas.encode('webp', 92)
await fs.writeFile(join(__dirname, 'anime-girl-92.webp'), webpData92)

console.log('✨ webp default quality size', webpData.length)
console.log('✨ webp quality 80 size', webpData80.length)
console.log('✨ webp quality 92 size', webpData92.length)
}

main()
10 changes: 5 additions & 5 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ function createCanvas(width, height, flag) {
}),
)
}
return canvasEncode.call(this, type, qualityOrConfig || 92)
return canvasEncode.call(this, type, qualityOrConfig)
}

canvasElement.encodeSync = function encodeSync(type, qualityOrConfig) {
Expand All @@ -251,7 +251,7 @@ function createCanvas(width, height, flag) {
}),
)
}
return canvasEncodeSync.call(this, type, qualityOrConfig || 92)
return canvasEncodeSync.call(this, type, qualityOrConfig)
}

canvasElement.toBuffer = function toBuffer(type = 'image/png', qualityOrConfig) {
Expand All @@ -265,7 +265,7 @@ function createCanvas(width, height, flag) {
}),
)
}
return canvasToBuffer.call(this, type, qualityOrConfig || 92)
return canvasToBuffer.call(this, type, qualityOrConfig)
}

canvasElement.toDataURL = function toDataURL(type = 'image/png', qualityOrConfig) {
Expand All @@ -279,7 +279,7 @@ function createCanvas(width, height, flag) {
}),
)
}
return canvasToDataURL.call(this, type, qualityOrConfig || 92)
return canvasToDataURL.call(this, type, qualityOrConfig)
}

canvasElement.toDataURLAsync = function toDataURLAsync(type = 'image/png', qualityOrConfig) {
Expand All @@ -293,7 +293,7 @@ function createCanvas(width, height, flag) {
}),
)
}
return canvasToDataURLAsync.call(this, type, qualityOrConfig || 92)
return canvasToDataURLAsync.call(this, type, qualityOrConfig)
}

return canvasElement
Expand Down
63 changes: 30 additions & 33 deletions src/lib.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,12 +168,12 @@ fn create_context(ctx: CallContext) -> Result<JsUndefined> {
fn encode(ctx: CallContext) -> Result<JsObject> {
let format = ctx.get::<JsString>(0)?.into_utf8()?;
let format_str = format.as_str()?;
let quality = if format_str != "avif" {
ctx.get::<JsNumber>(1)?.get_uint32()? as u8
} else if format_str == "webp" {
DEFAULT_WEBP_QUALITY
} else {
DEFAULT_JPEG_QUALITY
let quality = match ctx.get::<JsNumber>(1)?.get_uint32() {
Ok(number) => number as u8,
Err(_e) => match format_str {
"webp" => DEFAULT_WEBP_QUALITY,
_ => DEFAULT_JPEG_QUALITY,
},
};
let this = ctx.this_unchecked::<JsObject>();
let ctx_js = this.get_named_property::<JsObject>("ctx")?;
Expand Down Expand Up @@ -203,12 +203,12 @@ fn encode(ctx: CallContext) -> Result<JsObject> {
fn encode_sync(ctx: CallContext) -> Result<JsBuffer> {
let format = ctx.get::<JsString>(0)?.into_utf8()?;
let format_str = format.as_str()?;
let quality = if format_str != "avif" {
ctx.get::<JsNumber>(1)?.get_uint32()? as u8
} else if format_str == "webp" {
DEFAULT_WEBP_QUALITY
} else {
DEFAULT_JPEG_QUALITY
let quality = match ctx.get::<JsNumber>(1)?.get_uint32() {
Ok(number) => number as u8,
Err(_e) => match format_str {
"webp" => DEFAULT_WEBP_QUALITY,
_ => DEFAULT_JPEG_QUALITY,
},
};
let this = ctx.this_unchecked::<JsObject>();
let ctx_js = this.get_named_property::<JsObject>("ctx")?;
Expand Down Expand Up @@ -281,13 +281,12 @@ fn encode_sync(ctx: CallContext) -> Result<JsBuffer> {
fn to_buffer(ctx: CallContext) -> Result<JsBuffer> {
let mime_js = ctx.get::<JsString>(0)?.into_utf8()?;
let mime = mime_js.as_str()?;
let quality = if mime != MIME_AVIF {
ctx.get::<JsNumber>(1)?.get_uint32()? as u8
} else if mime == MIME_WEBP {
DEFAULT_WEBP_QUALITY
} else {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
DEFAULT_JPEG_QUALITY
let quality = match ctx.get::<JsNumber>(1)?.get_uint32() {
Ok(number) => number as u8,
Err(_e) => match mime {
MIME_WEBP => DEFAULT_WEBP_QUALITY,
_ => DEFAULT_JPEG_QUALITY, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
},
};

let context_data = get_data_ref(&ctx, mime, quality)?;
Expand Down Expand Up @@ -336,13 +335,12 @@ fn data(ctx: CallContext) -> Result<JsBuffer> {
fn to_data_url(ctx: CallContext) -> Result<JsString> {
let mime_js = ctx.get::<JsString>(0)?.into_utf8()?;
let mime = mime_js.as_str()?;
let quality = if mime != MIME_AVIF {
ctx.get::<JsNumber>(1)?.get_uint32()? as u8
} else if mime == MIME_WEBP {
DEFAULT_WEBP_QUALITY
} else {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
DEFAULT_JPEG_QUALITY
let quality = match ctx.get::<JsNumber>(1)?.get_uint32() {
Ok(number) => number as u8,
Err(_e) => match mime {
MIME_WEBP => DEFAULT_WEBP_QUALITY,
_ => DEFAULT_JPEG_QUALITY, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
},
};
let data_ref = get_data_ref(&ctx, mime, quality)?;
let mut output = format!("data:{};base64,", &mime);
Expand All @@ -361,13 +359,12 @@ fn to_data_url(ctx: CallContext) -> Result<JsString> {
fn to_data_url_async(ctx: CallContext) -> Result<JsObject> {
let mime_js = ctx.get::<JsString>(0)?.into_utf8()?;
let mime = mime_js.as_str()?;
let quality = if mime != MIME_AVIF {
ctx.get::<JsNumber>(1)?.get_uint32()? as u8
} else if mime == MIME_WEBP {
DEFAULT_WEBP_QUALITY
} else {
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
DEFAULT_JPEG_QUALITY
let quality = match ctx.get::<JsNumber>(1)?.get_uint32() {
Ok(number) => number as u8,
Err(_e) => match mime {
MIME_WEBP => DEFAULT_WEBP_QUALITY,
_ => DEFAULT_JPEG_QUALITY, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
},
};
let data_ref = get_data_ref(&ctx, mime, quality)?;
let async_task = AsyncDataUrl {
Expand Down