external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-15 10:09:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into fix_hml

Browse Source
This commit is contained in:
Jason Miller
2020-07-13 21:52:43 -04:00
committed by GitHub
parent f95954a9f1 a1fb445b06
commit 005d5180b4
39 changed files with 409 additions and 1474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.clang-format Normal file
View File

@@ -0,0 +1,2 @@
BasedOnStyle: Chromium
ColumnLimit: 100

3
.travis.yml
View File

@@ -2,3 +2,6 @@ language: node_js
cache: npm
script: npm run build
after_success: npm run sizereport
os:
- linux
- windows

1
README.md
View File

@@ -10,6 +10,7 @@ Google Analytics is used to record the following:
* [Basic visit data](https://support.google.com/analytics/answer/6004245?ref_topic=2919631).
* Before and after image size once an image is downloaded. These values are rounded to the nearest
kilobyte.
* If install is available, when Squoosh is installed, and what method was used to install Squoosh.
Image compression is handled locally; no additional data is sent to the server.

2
codecs/imagequant/build.sh
View File

@@ -2,6 +2,7 @@
set -e
export EM_CACHE="${PWD}/node_modules/.em_cache"
export OPTIMIZE="-Os -flto --llvm-lto 1"
export LDFLAGS="${OPTIMIZE}"
export CFLAGS="${OPTIMIZE}"
@@ -29,7 +30,6 @@ echo "============================================="
-I node_modules/libimagequant \
-o ./imagequant.js \
--std=c++11 \
-x c++ \
imagequant.cpp \
node_modules/libimagequant/libimagequant.a
)

140
codecs/imagequant/imagequant.cpp
View File

@@ -1,36 +1,37 @@
#include "emscripten/bind.h"
#include "emscripten/val.h"
#include <stdlib.h>
#include <emscripten/bind.h>
#include <emscripten/val.h>
#include <inttypes.h>
#include <limits.h>
#include <math.h>
#include <stdlib.h>
#include "libimagequant.h"
using namespace emscripten;
int version() {
return (((LIQ_VERSION/10000) % 100) << 16) |
(((LIQ_VERSION/100 ) % 100) << 8) |
(((LIQ_VERSION/1 ) % 100) << 0);
return (((LIQ_VERSION / 10000) % 100) << 16) | (((LIQ_VERSION / 100) % 100) << 8) |
(((LIQ_VERSION / 1) % 100) << 0);
}
class RawImage {
public:
public:
val buffer;
int width;
int height;
RawImage(val b, int w, int h)
: buffer(b), width(w), height(h) {}
RawImage(val b, int w, int h) : buffer(b), width(w), height(h) {}
};
liq_attr *attr;
liq_image *image;
liq_result *res;
liq_attr* attr;
liq_image* image;
liq_result* res;
uint8_t* result;
RawImage quantize(std::string rawimage, int image_width, int image_height, int num_colors, float dithering) {
RawImage quantize(std::string rawimage,
int image_width,
int image_height,
int num_colors,
float dithering) {
const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
int size = image_width * image_height;
attr = liq_attr_create();
@@ -38,12 +39,12 @@ RawImage quantize(std::string rawimage, int image_width, int image_height, int n
liq_set_max_colors(attr, num_colors);
liq_image_quantize(image, attr, &res);
liq_set_dithering_level(res, dithering);
uint8_t* image8bit = (uint8_t*) malloc(size);
result = (uint8_t*) malloc(size * 4);
uint8_t* image8bit = (uint8_t*)malloc(size);
result = (uint8_t*)malloc(size * 4);
liq_write_remapped_image(res, image, image8bit, size);
const liq_palette *pal = liq_get_palette(res);
const liq_palette* pal = liq_get_palette(res);
// Turn palletted image back into an RGBA image
for(int i = 0; i < size; i++) {
for (int i = 0; i < size; i++) {
result[i * 4 + 0] = pal->entries[image8bit[i]].r;
result[i * 4 + 1] = pal->entries[image8bit[i]].g;
result[i * 4 + 2] = pal->entries[image8bit[i]].b;
@@ -53,43 +54,41 @@ RawImage quantize(std::string rawimage, int image_width, int image_height, int n
liq_result_destroy(res);
liq_image_destroy(image);
liq_attr_destroy(attr);
return {
val(typed_memory_view(image_width*image_height*4, result)),
image_width,
image_height
};
return {val(typed_memory_view(image_width * image_height * 4, result)), image_width,
image_height};
}
const liq_color zx_colors[] = {
{.r = 0, .g = 0, .b = 0, .a = 255}, // regular black
{.r = 0, .g = 0, .b = 215, .a = 255}, // regular blue
{.r = 215, .g = 0, .b = 0, .a = 255}, // regular red
{.r = 215, .g = 0, .b = 215, .a = 255}, // regular magenta
{.r = 0, .g = 215, .b = 0, .a = 255}, // regular green
{.r = 0, .g = 215, .b = 215, .a = 255}, // regular cyan
{.r = 215, .g = 215, .b = 0, .a = 255}, // regular yellow
{.r = 215, .g = 215, .b = 215, .a = 255}, // regular white
{.r = 0, .g = 0, .b = 255, .a = 255}, // bright blue
{.r = 255, .g = 0, .b = 0, .a = 255}, // bright red
{.r = 255, .g = 0, .b = 255, .a = 255}, // bright magenta
{.r = 0, .g = 255, .b = 0, .a = 255}, // bright green
{.r = 0, .g = 255, .b = 255, .a = 255}, // bright cyan
{.r = 255, .g = 255, .b = 0, .a = 255}, // bright yellow
{.r = 255, .g = 255, .b = 255, .a = 255} // bright white
{.r = 0, .g = 0, .b = 0, .a = 255}, // regular black
{.r = 0, .g = 0, .b = 215, .a = 255}, // regular blue
{.r = 215, .g = 0, .b = 0, .a = 255}, // regular red
{.r = 215, .g = 0, .b = 215, .a = 255}, // regular magenta
{.r = 0, .g = 215, .b = 0, .a = 255}, // regular green
{.r = 0, .g = 215, .b = 215, .a = 255}, // regular cyan
{.r = 215, .g = 215, .b = 0, .a = 255}, // regular yellow
{.r = 215, .g = 215, .b = 215, .a = 255}, // regular white
{.r = 0, .g = 0, .b = 255, .a = 255}, // bright blue
{.r = 255, .g = 0, .b = 0, .a = 255}, // bright red
{.r = 255, .g = 0, .b = 255, .a = 255}, // bright magenta
{.r = 0, .g = 255, .b = 0, .a = 255}, // bright green
{.r = 0, .g = 255, .b = 255, .a = 255}, // bright cyan
{.r = 255, .g = 255, .b = 0, .a = 255}, // bright yellow
{.r = 255, .g = 255, .b = 255, .a = 255} // bright white
};
uint8_t block[8 * 8 * 4];
/**
* The ZX has one bit per pixel, but can assign two colours to an 8x8 block. The two colours must
* both be 'regular' or 'bright'. Black exists as both regular and bright.
* The ZX has one bit per pixel, but can assign two colours to an 8x8 block. The
* two colours must both be 'regular' or 'bright'. Black exists as both regular
* and bright.
*/
RawImage zx_quantize(std::string rawimage, int image_width, int image_height, float dithering) {
const uint8_t* image_buffer = (uint8_t*) rawimage.c_str();
const uint8_t* image_buffer = (uint8_t*)rawimage.c_str();
int size = image_width * image_height;
int bytes_per_pixel = 4;
result = (uint8_t*) malloc(size * bytes_per_pixel);
uint8_t* image8bit = (uint8_t*) malloc(8 * 8);
result = (uint8_t*)malloc(size * bytes_per_pixel);
uint8_t* image8bit = (uint8_t*)malloc(8 * 8);
// For each 8x8 grid
for (int block_start_y = 0; block_start_y < image_height; block_start_y += 8) {
@@ -99,7 +98,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
int block_width = 8;
int block_height = 8;
// If the block hangs off the right/bottom of the image dimensions, make it smaller to fit.
// If the block hangs off the right/bottom of the image dimensions, make
// it smaller to fit.
if (block_start_y + block_height > image_height) {
block_height = image_height - block_start_y;
}
@@ -125,12 +125,11 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
for (int color_index = 0; color_index < 15; color_index++) {
liq_color color = zx_colors[color_index];
// Using Euclidean distance. LibQuant has better methods, but it requires conversion to
// LAB, so I don't think it's worth it.
int distance =
pow(color.r - image_buffer[pixel_start + 0], 2) +
pow(color.g - image_buffer[pixel_start + 1], 2) +
pow(color.b - image_buffer[pixel_start + 2], 2);
// Using Euclidean distance. LibQuant has better methods, but it
// requires conversion to LAB, so I don't think it's worth it.
int distance = pow(color.r - image_buffer[pixel_start + 0], 2) +
pow(color.g - image_buffer[pixel_start + 1], 2) +
pow(color.b - image_buffer[pixel_start + 2], 2);
if (distance < smallest_distance) {
winning_index = color_index;
@@ -151,7 +150,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
for (int color_index = 0; color_index < 15; color_index++) {
if (color_popularity[color_index] > highest_popularity) {
// Store this as the most popular pixel, and demote the current values:
// Store this as the most popular pixel, and demote the current
// values:
third_color_index = second_color_index;
third_highest_popularity = second_highest_popularity;
second_color_index = first_color_index;
@@ -169,8 +169,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
}
}
// ZX images can't mix bright and regular colours, except black which appears in both.
// Resolve any conflict:
// ZX images can't mix bright and regular colours, except black which
// appears in both. Resolve any conflict:
while (1) {
// If either colour is black, there's no conflict to resolve.
if (first_color_index != 0 && second_color_index != 0) {
@@ -183,12 +183,13 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
}
}
// If, during conflict resolving, we now have two of the same colour (because we initially
// selected the bright & regular version of the same colour), retry again with the third
// most popular colour.
// If, during conflict resolving, we now have two of the same colour
// (because we initially selected the bright & regular version of the
// same colour), retry again with the third most popular colour.
if (first_color_index == second_color_index) {
second_color_index = third_color_index;
} else break;
} else
break;
}
// Quantize
@@ -200,13 +201,15 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
liq_image_quantize(image, attr, &res);
liq_set_dithering_level(res, dithering);
liq_write_remapped_image(res, image, image8bit, size);
const liq_palette *pal = liq_get_palette(res);
const liq_palette* pal = liq_get_palette(res);
// Turn palletted image back into an RGBA image, and write it into the full size result image.
for(int y = 0; y < block_height; y++) {
for(int x = 0; x < block_width; x++) {
// Turn palletted image back into an RGBA image, and write it into the
// full size result image.
for (int y = 0; y < block_height; y++) {
for (int x = 0; x < block_width; x++) {
int image8BitPos = y * block_width + x;
int resultStartPos = ((block_start_y + y) * bytes_per_pixel * image_width) + ((block_start_x + x) * bytes_per_pixel);
int resultStartPos = ((block_start_y + y) * bytes_per_pixel * image_width) +
((block_start_x + x) * bytes_per_pixel);
result[resultStartPos + 0] = pal->entries[image8bit[image8BitPos]].r;
result[resultStartPos + 1] = pal->entries[image8bit[image8BitPos]].g;
result[resultStartPos + 2] = pal->entries[image8bit[image8BitPos]].b;
@@ -221,11 +224,8 @@ RawImage zx_quantize(std::string rawimage, int image_width, int image_height, fl
}
free(image8bit);
return {
val(typed_memory_view(image_width*image_height*4, result)),
image_width,
image_height
};
return {val(typed_memory_view(image_width * image_height * 4, result)), image_width,
image_height};
}
void free_result() {
@@ -234,9 +234,9 @@ void free_result() {
EMSCRIPTEN_BINDINGS(my_module) {
class_<RawImage>("RawImage")
.property("buffer", &RawImage::buffer)
.property("width", &RawImage::width)
.property("height", &RawImage::height);
.property("buffer", &RawImage::buffer)
.property("width", &RawImage::width)
.property("height", &RawImage::height);
function("quantize", &quantize);
function("zx_quantize", &zx_quantize);

16
codecs/mozjpeg_enc/build.sh
View File

@@ -2,6 +2,7 @@
set -e
export EM_CACHE="${PWD}/node_modules/.em_cache"
export OPTIMIZE="-Os -flto --llvm-lto 1"
export LDFLAGS="${OPTIMIZE}"
export CFLAGS="${OPTIMIZE}"
@@ -15,9 +16,9 @@ echo "Compiling mozjpeg"
echo "============================================="
(
cd node_modules/mozjpeg
autoreconf -fiv
emconfigure ./configure --without-simd
emmake make libjpeg.la -j`nproc`
autoreconf -iv
emconfigure ./configure -C --without-simd
emmake make libjpeg.la rdswitch.o -j`nproc`
)
echo "============================================="
echo "Compiling mozjpeg done"
@@ -31,18 +32,15 @@ echo "============================================="
--bind \
${OPTIMIZE} \
--closure 1 \
-s WASM=1 \
-s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \
-s 'EXPORT_NAME="mozjpeg_enc"' \
-I node_modules/mozjpeg \
-o ./mozjpeg_enc.js \
-Wno-deprecated-register \
-Wno-writable-strings \
node_modules/mozjpeg/rdswitch.c \
-x c++ -std=c++11 \
-std=c++11 \
mozjpeg_enc.cpp \
node_modules/mozjpeg/.libs/libjpeg.a
node_modules/mozjpeg/.libs/libjpeg.a \
node_modules/mozjpeg/rdswitch.o
)
echo "============================================="
echo "Compiling wasm bindings done"

76
codecs/mozjpeg_enc/mozjpeg_enc.cpp
View File

@@ -1,18 +1,22 @@
#include <emscripten/bind.h>
#include <emscripten/val.h>
#include <stdlib.h>
#include <inttypes.h>
#include <stdio.h>
#include <setjmp.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include "config.h"
#include "jpeglib.h"
extern "C" {
#include "cdjpeg.h"
}
using namespace emscripten;
// MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro hackery to turn it
// into a string. More details here: https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
// MozJPEG doesn’t expose a numeric version, so I have to do some fun C macro
// hackery to turn it into a string. More details here:
// https://gcc.gnu.org/onlinedocs/cpp/Stringizing.html
#define xstr(s) str(s)
#define str(s) #s
@@ -39,8 +43,8 @@ int version() {
char buffer[] = xstr(MOZJPEG_VERSION);
int version = 0;
int last_index = 0;
for(int i = 0; i < strlen(buffer); i++) {
if(buffer[i] == '.') {
for (int i = 0; i < strlen(buffer); i++) {
if (buffer[i] == '.') {
buffer[i] = '\0';
version = version << 8 | atoi(&buffer[last_index]);
buffer[i] = '.';
@@ -55,13 +59,12 @@ uint8_t* last_result;
struct jpeg_compress_struct cinfo;
val encode(std::string image_in, int image_width, int image_height, MozJpegOptions opts) {
uint8_t* image_buffer = (uint8_t*) image_in.c_str();
uint8_t* image_buffer = (uint8_t*)image_in.c_str();
// The code below is basically the `write_JPEG_file` function from
// https://github.com/mozilla/mozjpeg/blob/master/example.c
// I just write to memory instead of a file.
/* This struct contains the JPEG compression parameters and pointers to
* working space (which is allocated as needed by the JPEG library).
* It is possible to have several such structures, representing multiple
@@ -78,8 +81,8 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
*/
struct jpeg_error_mgr jerr;
/* More stuff */
JSAMPROW row_pointer[1]; /* pointer to JSAMPLE row[s] */
int row_stride; /* physical row width in image buffer */
JSAMPROW row_pointer[1]; /* pointer to JSAMPLE row[s] */
int row_stride; /* physical row width in image buffer */
uint8_t* output;
unsigned long size;
@@ -113,17 +116,17 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
/* First we supply a description of the input image.
* Four fields of the cinfo struct must be filled in:
*/
cinfo.image_width = image_width; /* image width and height, in pixels */
cinfo.image_width = image_width; /* image width and height, in pixels */
cinfo.image_height = image_height;
cinfo.input_components = 4; /* # of color components per pixel */
cinfo.in_color_space = JCS_EXT_RGBA; /* colorspace of input image */
cinfo.input_components = 4; /* # of color components per pixel */
cinfo.in_color_space = JCS_EXT_RGBA; /* colorspace of input image */
/* Now use the library's routine to set default compression parameters.
* (You must set at least cinfo.in_color_space before calling this,
* since the defaults depend on the source color space.)
*/
jpeg_set_defaults(&cinfo);
jpeg_set_colorspace(&cinfo, (J_COLOR_SPACE) opts.color_space);
jpeg_set_colorspace(&cinfo, (J_COLOR_SPACE)opts.color_space);
if (opts.quant_table != -1) {
jpeg_c_set_int_param(&cinfo, JINT_BASE_QUANT_TBL_IDX, opts.quant_table);
@@ -143,17 +146,17 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
jpeg_c_set_bool_param(&cinfo, JBOOLEAN_TRELLIS_Q_OPT, opts.trellis_opt_table);
jpeg_c_set_int_param(&cinfo, JINT_TRELLIS_NUM_LOOPS, opts.trellis_loops);
// A little hacky to build a string for this, but it means we can use set_quality_ratings which
// does some useful heuristic stuff.
// A little hacky to build a string for this, but it means we can use
// set_quality_ratings which does some useful heuristic stuff.
std::string quality_str = std::to_string(opts.quality);
if (opts.separate_chroma_quality && opts.color_space == JCS_YCbCr) {
quality_str += "," + std::to_string(opts.chroma_quality);
}
char const *pqual = quality_str.c_str();
char const* pqual = quality_str.c_str();
set_quality_ratings(&cinfo, (char*) pqual, opts.baseline);
set_quality_ratings(&cinfo, (char*)pqual, opts.baseline);
if (!opts.auto_subsample && opts.color_space == JCS_YCbCr) {
cinfo.comp_info[0].h_samp_factor = opts.chroma_subsample;
@@ -188,8 +191,8 @@ val encode(std::string image_in, int image_width, int image_height, MozJpegOptio
* Here the array is only one element long, but you could pass
* more than one scanline at a time if that's more convenient.
*/
row_pointer[0] = & image_buffer[cinfo.next_scanline * row_stride];
(void) jpeg_write_scanlines(&cinfo, row_pointer, 1);
row_pointer[0] = &image_buffer[cinfo.next_scanline * row_stride];
(void)jpeg_write_scanlines(&cinfo, row_pointer, 1);
}
/* Step 6: Finish compression */
@@ -210,23 +213,22 @@ void free_result() {
EMSCRIPTEN_BINDINGS(my_module) {
value_object<MozJpegOptions>("MozJpegOptions")
.field("quality", &MozJpegOptions::quality)
.field("baseline", &MozJpegOptions::baseline)
.field("arithmetic", &MozJpegOptions::arithmetic)
.field("progressive", &MozJpegOptions::progressive)
.field("optimize_coding", &MozJpegOptions::optimize_coding)
.field("smoothing", &MozJpegOptions::smoothing)
.field("color_space", &MozJpegOptions::color_space)
.field("quant_table", &MozJpegOptions::quant_table)
.field("trellis_multipass", &MozJpegOptions::trellis_multipass)
.field("trellis_opt_zero", &MozJpegOptions::trellis_opt_zero)
.field("trellis_opt_table", &MozJpegOptions::trellis_opt_table)
.field("trellis_loops", &MozJpegOptions::trellis_loops)
.field("chroma_subsample", &MozJpegOptions::chroma_subsample)
.field("auto_subsample", &MozJpegOptions::auto_subsample)
.field("separate_chroma_quality", &MozJpegOptions::separate_chroma_quality)
.field("chroma_quality", &MozJpegOptions::chroma_quality)
;
.field("quality", &MozJpegOptions::quality)
.field("baseline", &MozJpegOptions::baseline)
.field("arithmetic", &MozJpegOptions::arithmetic)
.field("progressive", &MozJpegOptions::progressive)
.field("optimize_coding", &MozJpegOptions::optimize_coding)
.field("smoothing", &MozJpegOptions::smoothing)
.field("color_space", &MozJpegOptions::color_space)
.field("quant_table", &MozJpegOptions::quant_table)
.field("trellis_multipass", &MozJpegOptions::trellis_multipass)
.field("trellis_opt_zero", &MozJpegOptions::trellis_opt_zero)
.field("trellis_opt_table", &MozJpegOptions::trellis_opt_table)
.field("trellis_loops", &MozJpegOptions::trellis_loops)
.field("chroma_subsample", &MozJpegOptions::chroma_subsample)
.field("auto_subsample", &MozJpegOptions::auto_subsample)
.field("separate_chroma_quality", &MozJpegOptions::separate_chroma_quality)
.field("chroma_quality", &MozJpegOptions::chroma_quality);
function("version", &version);
function("encode", &encode);

BIN
codecs/mozjpeg_enc/mozjpeg_enc.wasm
View File

Binary file not shown.

28
codecs/webp_dec/build.sh → codecs/webp/build.sh Executable file → Normal file
View File

@@ -2,6 +2,7 @@
set -e
export EM_CACHE="${PWD}/node_modules/.em_cache"
export OPTIMIZE="-Os -flto --llvm-lto 1"
export LDFLAGS="${OPTIMIZE}"
export CFLAGS="${OPTIMIZE}"
@@ -14,10 +15,8 @@ echo "Compiling libwebp"
echo "============================================="
test -n "$SKIP_LIBWEBP" || (
cd node_modules/libwebp
autoreconf -fiv
rm -rf build || true
mkdir -p build && cd build
emconfigure ../configure \
autoreconf -iv
emconfigure ./configure -C \
--disable-libwebpdemux \
--disable-wic \
--disable-gif \
@@ -44,12 +43,23 @@ echo "============================================="
-s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \
-s 'EXPORT_NAME="webp_dec"' \
--std=c++11 \
-I node_modules/libwebp \
-o ./webp_dec.js \
-x c++ \
webp_dec.cpp \
node_modules/libwebp/build/src/.libs/libwebp.a
-o dec/webp_dec.js \
dec/webp_dec.cpp \
node_modules/libwebp/src/.libs/libwebp.a
)
(
emcc \
${OPTIMIZE} \
--closure 1 \
--bind \
-s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \
-s 'EXPORT_NAME="webp_enc"' \
-I node_modules/libwebp \
-o enc/webp_enc.js \
enc/webp_enc.cpp \
node_modules/libwebp/src/.libs/libwebp.a
)
echo "============================================="
echo "Compiling wasm bindings done"

0
codecs/webp_dec/README.md → codecs/webp/dec/README.md
View File

2
codecs/webp_dec/example.html → codecs/webp/dec/example.html
View File

@@ -10,7 +10,7 @@
Module.onRuntimeInitialized = async _ => {
console.log('Version:', Module.version().toString(16));
const image = await loadFile('../example.webp');
const image = await loadFile('../../example.webp');
const result = Module.decode(image);
const imageData = new ImageData(new Uint8ClampedArray(result.buffer), result.width, result.height);
Module.free_result();

19
codecs/webp_dec/webp_dec.cpp → codecs/webp/dec/webp_dec.cpp
View File

@@ -1,8 +1,8 @@
#include <string>
#include "emscripten/bind.h"
#include "emscripten/val.h"
#include "src/webp/decode.h"
#include "src/webp/demux.h"
#include <string>
using namespace emscripten;
@@ -11,24 +11,19 @@ int version() {
}
class RawImage {
public:
public:
val buffer;
int width;
int height;
RawImage(val b, int w, int h)
: buffer(b), width(w), height(h) {}
RawImage(val b, int w, int h) : buffer(b), width(w), height(h) {}
};
uint8_t* last_result;
RawImage decode(std::string buffer) {
int width, height;
last_result = WebPDecodeRGBA((const uint8_t*)buffer.c_str(), buffer.size(), &width, &height);
return RawImage(
val(typed_memory_view(width*height*4, last_result)),
width,
height
);
return RawImage(val(typed_memory_view(width * height * 4, last_result)), width, height);
}
void free_result() {
@@ -37,9 +32,9 @@ void free_result() {
EMSCRIPTEN_BINDINGS(my_module) {
class_<RawImage>("RawImage")
.property("buffer", &RawImage::buffer)
.property("width", &RawImage::width)
.property("height", &RawImage::height);
.property("buffer", &RawImage::buffer)
.property("width", &RawImage::width)
.property("height", &RawImage::height);
function("decode", &decode);
function("version", &version);

0
codecs/webp_dec/webp_dec.d.ts → codecs/webp/dec/webp_dec.d.ts vendored
View File

0
codecs/webp_dec/webp_dec.js → codecs/webp/dec/webp_dec.js
View File

0
codecs/webp_dec/webp_dec.wasm → codecs/webp/dec/webp_dec.wasm
View File

0
codecs/webp_enc/README.md → codecs/webp/enc/README.md
View File

2
codecs/webp_enc/example.html → codecs/webp/enc/example.html
View File

@@ -19,7 +19,7 @@
module.onRuntimeInitialized = async _ => {
console.log('Version:', module.version().toString(16));
const image = await loadImage('../example.png');
const image = await loadImage('../../example.png');
const result = module.encode(image.data, image.width, image.height, {
quality: 75,
target_size: 0,

93
codecs/webp/enc/webp_enc.cpp Normal file
View File

@@ -0,0 +1,93 @@
#include <emscripten/bind.h>
#include <emscripten/val.h>
#include <stdlib.h>
#include <string.h>
#include <stdexcept>
#include "src/webp/encode.h"
using namespace emscripten;
int version() {
return WebPGetEncoderVersion();
}
uint8_t* last_result;
val encode(std::string img, int width, int height, WebPConfig config) {
uint8_t* img_in = (uint8_t*)img.c_str();
// A lot of this is duplicated from Encode in picture_enc.c
WebPPicture pic;
WebPMemoryWriter wrt;
int ok;
if (!WebPPictureInit(&pic)) {
// shouldn't happen, except if system installation is broken
throw std::runtime_error("Unexpected error");
}
// Only use use_argb if we really need it, as it's slower.
pic.use_argb = config.lossless || config.use_sharp_yuv || config.preprocessing > 0;
pic.width = width;
pic.height = height;
pic.writer = WebPMemoryWrite;
pic.custom_ptr = &wrt;
WebPMemoryWriterInit(&wrt);
ok = WebPPictureImportRGBA(&pic, (uint8_t*)img_in, width * 4) && WebPEncode(&config, &pic);
WebPPictureFree(&pic);
if (!ok) {
WebPMemoryWriterClear(&wrt);
throw std::runtime_error("Encode failed");
}
last_result = wrt.mem;
return val(typed_memory_view(wrt.size, wrt.mem));
}
void free_result() {
WebPFree(last_result);
}
EMSCRIPTEN_BINDINGS(my_module) {
enum_<WebPImageHint>("WebPImageHint")
.value("WEBP_HINT_DEFAULT", WebPImageHint::WEBP_HINT_DEFAULT)
.value("WEBP_HINT_PICTURE", WebPImageHint::WEBP_HINT_PICTURE)
.value("WEBP_HINT_PHOTO", WebPImageHint::WEBP_HINT_PHOTO)
.value("WEBP_HINT_GRAPH", WebPImageHint::WEBP_HINT_GRAPH);
value_object<WebPConfig>("WebPConfig")
.field("lossless", &WebPConfig::lossless)
.field("quality", &WebPConfig::quality)
.field("method", &WebPConfig::method)
.field("image_hint", &WebPConfig::image_hint)
.field("target_size", &WebPConfig::target_size)
.field("target_PSNR", &WebPConfig::target_PSNR)
.field("segments", &WebPConfig::segments)
.field("sns_strength", &WebPConfig::sns_strength)
.field("filter_strength", &WebPConfig::filter_strength)
.field("filter_sharpness", &WebPConfig::filter_sharpness)
.field("filter_type", &WebPConfig::filter_type)
.field("autofilter", &WebPConfig::autofilter)
.field("alpha_compression", &WebPConfig::alpha_compression)
.field("alpha_filtering", &WebPConfig::alpha_filtering)
.field("alpha_quality", &WebPConfig::alpha_quality)
.field("pass", &WebPConfig::pass)
.field("show_compressed", &WebPConfig::show_compressed)
.field("preprocessing", &WebPConfig::preprocessing)
.field("partitions", &WebPConfig::partitions)
.field("partition_limit", &WebPConfig::partition_limit)
.field("emulate_jpeg_size", &WebPConfig::emulate_jpeg_size)
.field("thread_level", &WebPConfig::thread_level)
.field("low_memory", &WebPConfig::low_memory)
.field("near_lossless", &WebPConfig::near_lossless)
.field("exact", &WebPConfig::exact)
.field("use_delta_palette", &WebPConfig::use_delta_palette)
.field("use_sharp_yuv", &WebPConfig::use_sharp_yuv);
function("version", &version);
function("encode", &encode);
function("free_result", &free_result);
}

0
codecs/webp_enc/webp_enc.d.ts → codecs/webp/enc/webp_enc.d.ts vendored
View File

0
codecs/webp_enc/webp_enc.js → codecs/webp/enc/webp_enc.js
View File

0
codecs/webp_enc/webp_enc.wasm → codecs/webp/enc/webp_enc.wasm
View File

2
codecs/webp_enc/package-lock.json → codecs/webp/package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "webp_enc",
"name": "webp",
"requires": true,
"lockfileVersion": 1,
"dependencies": {

2
codecs/webp_enc/package.json → codecs/webp/package.json
View File

@@ -1,5 +1,5 @@
{
"name": "webp_enc",
"name": "webp",
"scripts": {
"install": "napa",
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten-upstream ./build.sh"

1147
codecs/webp_dec/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
codecs/webp_dec/package.json
View File

@@ -1,13 +0,0 @@
{
"name": "webp_dec",
"scripts": {
"install": "napa",
"build": "docker run --rm -v $(pwd):/src trzeci/emscripten-upstream ./build.sh"
},
"napa": {
"libwebp": "webmproject/libwebp#v1.0.2"
},
"devDependencies": {
"napa": "3.0.0"
}
}

62
codecs/webp_enc/build.sh
View File

@@ -1,62 +0,0 @@
#!/bin/bash
set -e
export OPTIMIZE="-Os -flto --llvm-lto 1"
export LDFLAGS="${OPTIMIZE}"
export CFLAGS="${OPTIMIZE}"
export CPPFLAGS="${OPTIMIZE}"
apt-get update
apt-get install -qqy autoconf libtool pkg-config
echo "============================================="
echo "Compiling libwebp"
echo "============================================="
test -n "$SKIP_LIBWEBP" || (
cd node_modules/libwebp
autoreconf -fiv
rm -rf build || true
mkdir -p build && cd build
emconfigure ../configure \
--disable-libwebpdemux \
--disable-wic \
--disable-gif \
--disable-tiff \
--disable-jpeg \
--disable-png \
--disable-sdl \
--disable-gl \
--disable-threading \
--disable-neon-rtcd \
--disable-neon \
--disable-sse2 \
--disable-sse4.1
emmake make -j`nproc`
)
echo "============================================="
echo "Compiling wasm bindings"
echo "============================================="
(
emcc \
${OPTIMIZE} \
--closure 1 \
--bind \
-s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \
-s 'EXPORT_NAME="webp_enc"' \
--std=c++11 \
-I node_modules/libwebp \
-o ./webp_enc.js \
-x c++ \
webp_enc.cpp \
node_modules/libwebp/build/src/.libs/libwebp.a
)
echo "============================================="
echo "Compiling wasm bindings done"
echo "============================================="
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
echo "Did you update your docker image?"
echo "Run \`docker pull trzeci/emscripten-upstream\`"
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"

96
codecs/webp_enc/webp_enc.cpp
View File

@@ -1,96 +0,0 @@
#include <emscripten/bind.h>
#include <emscripten/val.h>
#include "src/webp/encode.h"
#include <stdlib.h>
#include <string.h>
#include <stdexcept>
using namespace emscripten;
int version() {
return WebPGetEncoderVersion();
}
uint8_t* last_result;
val encode(std::string img, int width, int height, WebPConfig config) {
uint8_t* img_in = (uint8_t*) img.c_str();
// A lot of this is duplicated from Encode in picture_enc.c
WebPPicture pic;
WebPMemoryWriter wrt;
int ok;
if (!WebPPictureInit(&pic)) {
// shouldn't happen, except if system installation is broken
throw std::runtime_error("Unexpected error");
}
// Only use use_argb if we really need it, as it's slower.
pic.use_argb = config.lossless || config.use_sharp_yuv || config.preprocessing > 0;
pic.width = width;
pic.height = height;
pic.writer = WebPMemoryWrite;
pic.custom_ptr = &wrt;
WebPMemoryWriterInit(&wrt);
ok = WebPPictureImportRGBA(&pic, (uint8_t*) img_in, width * 4) && WebPEncode(&config, &pic);
WebPPictureFree(&pic);
if (!ok) {
WebPMemoryWriterClear(&wrt);
throw std::runtime_error("Encode failed");
}
last_result = wrt.mem;
return val(typed_memory_view(wrt.size, wrt.mem));
}
void free_result() {
WebPFree(last_result);
}
EMSCRIPTEN_BINDINGS(my_module) {
enum_<WebPImageHint>("WebPImageHint")
.value("WEBP_HINT_DEFAULT", WebPImageHint::WEBP_HINT_DEFAULT)
.value("WEBP_HINT_PICTURE", WebPImageHint::WEBP_HINT_PICTURE)
.value("WEBP_HINT_PHOTO", WebPImageHint::WEBP_HINT_PHOTO)
.value("WEBP_HINT_GRAPH", WebPImageHint::WEBP_HINT_GRAPH)
;
value_object<WebPConfig>("WebPConfig")
.field("lossless", &WebPConfig::lossless)
.field("quality", &WebPConfig::quality)
.field("method", &WebPConfig::method)
.field("image_hint", &WebPConfig::image_hint)
.field("target_size", &WebPConfig::target_size)
.field("target_PSNR", &WebPConfig::target_PSNR)
.field("segments", &WebPConfig::segments)
.field("sns_strength", &WebPConfig::sns_strength)
.field("filter_strength", &WebPConfig::filter_strength)
.field("filter_sharpness", &WebPConfig::filter_sharpness)
.field("filter_type", &WebPConfig::filter_type)
.field("autofilter", &WebPConfig::autofilter)
.field("alpha_compression", &WebPConfig::alpha_compression)
.field("alpha_filtering", &WebPConfig::alpha_filtering)
.field("alpha_quality", &WebPConfig::alpha_quality)
.field("pass", &WebPConfig::pass)
.field("show_compressed", &WebPConfig::show_compressed)
.field("preprocessing", &WebPConfig::preprocessing)
.field("partitions", &WebPConfig::partitions)
.field("partition_limit", &WebPConfig::partition_limit)
.field("emulate_jpeg_size", &WebPConfig::emulate_jpeg_size)
.field("thread_level", &WebPConfig::thread_level)
.field("low_memory", &WebPConfig::low_memory)
.field("near_lossless", &WebPConfig::near_lossless)
.field("exact", &WebPConfig::exact)
.field("use_delta_palette", &WebPConfig::use_delta_palette)
.field("use_sharp_yuv", &WebPConfig::use_sharp_yuv)
;
function("version", &version);
function("encode", &encode);
function("free_result", &free_result);
}

2
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{
"name": "squoosh",
"version": "1.9.1",
"version": "1.11.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

2
package.json
View File

@@ -1,7 +1,7 @@
{
"private": true,
"name": "squoosh",
"version": "1.9.1",
"version": "1.11.3",
"license": "apache-2.0",
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 --hot",

2
sizereport.config.js
View File

@@ -3,7 +3,7 @@ const escapeRE = require("escape-string-regexp");
module.exports = {
repo: "GoogleChromeLabs/squoosh",
path: "build/**/!(*.map)",
branch: "master",
branch: "dev",
findRenamed(path, newPaths) {
const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(path);
if (!nameParts) return;

4
src/codecs/webp/decoder.ts
View File

@@ -1,5 +1,5 @@
import webp_dec, { WebPModule } from '../../../codecs/webp_dec/webp_dec';
import wasmUrl from '../../../codecs/webp_dec/webp_dec.wasm';
import webp_dec, { WebPModule } from '../../../codecs/webp/dec/webp_dec';
import wasmUrl from '../../../codecs/webp/dec/webp_dec.wasm';
import { initEmscriptenModule } from '../util';
let emscriptenModule: Promise<WebPModule>;

4
src/codecs/webp/encoder.ts
View File

@@ -1,5 +1,5 @@
import webp_enc, { WebPModule } from '../../../codecs/webp_enc/webp_enc';
import wasmUrl from '../../../codecs/webp_enc/webp_enc.wasm';
import webp_enc, { WebPModule } from '../../../codecs/webp/enc/webp_enc';
import wasmUrl from '../../../codecs/webp/enc/webp_enc.wasm';
import { EncodeOptions } from './encoder-meta';
import { initEmscriptenModule } from '../util';

2
src/codecs/webp/options.tsx
View File

@@ -270,7 +270,7 @@ export default class WebPEncoderOptions extends Component<Props, State> {
value={options.sns_strength}
onInput={this.onChange}
>
Spacial noise shaping:
Spatial noise shaping:
</Range>
</div>
<label class={style.optionTextFirst}>

86
src/components/intro/index.tsx
View File

@@ -41,17 +41,31 @@ const demos = [
},
];
const installButtonSource = 'introInstallButton-Purple';
interface Props {
onFile: (file: File | Fileish) => void;
showSnack: SnackBarElement['showSnackbar'];
}
interface State {
fetchingDemoIndex?: number;
beforeInstallEvent?: BeforeInstallPromptEvent;
}
export default class Intro extends Component<Props, State> {
state: State = {};
private fileInput?: HTMLInputElement;
private installingViaButton = false;
constructor() {
super();
// Listen for beforeinstallprompt events, indicating Squoosh is installable.
window.addEventListener('beforeinstallprompt', this.onBeforeInstallPromptEvent);
// Listen for the appinstalled event, indicating Squoosh has been installed.
window.addEventListener('appinstalled', this.onAppInstalled);
}
@bind
private resetFileInput() {
@@ -90,7 +104,64 @@ export default class Intro extends Component<Props, State> {
}
}
render({ }: Props, { fetchingDemoIndex }: State) {
@bind
private onBeforeInstallPromptEvent(event: BeforeInstallPromptEvent) {
// Don't show the mini-infobar on mobile
event.preventDefault();
// Save the beforeinstallprompt event so it can be called later.
this.setState({ beforeInstallEvent: event });
// Log the event.
const gaEventInfo = {
eventCategory: 'pwa-install',
eventAction: 'promo-shown',
nonInteraction: true,
};
ga('send', 'event', gaEventInfo);
}
@bind
private async onInstallClick(event: Event) {
// Get the deferred beforeinstallprompt event
const beforeInstallEvent = this.state.beforeInstallEvent;
// If there's no deferred prompt, bail.
if (!beforeInstallEvent) return;
this.installingViaButton = true;
// Show the browser install prompt
beforeInstallEvent.prompt();
// Wait for the user to accept or dismiss the install prompt
const { outcome } = await beforeInstallEvent.userChoice;
// Send the analytics data
const gaEventInfo = {
eventCategory: 'pwa-install',
eventAction: 'promo-clicked',
eventLabel: installButtonSource,
eventValue: outcome === 'accepted' ? 1 : 0,
};
ga('send', 'event', gaEventInfo);
// If the prompt was dismissed, we aren't going to install via the button.
if (outcome === 'dismissed') {
this.installingViaButton = false;
}
}
@bind
private onAppInstalled() {
// Try to get the install, if it's not set, use 'browser'
const source = this.installingViaButton ? installButtonSource : 'browser';
ga('send', 'event', 'pwa-install', 'installed', source);
this.installingViaButton = false;
// We don't need the install button, if it's shown
this.setState({ beforeInstallEvent: undefined });
}
render({ }: Props, { fetchingDemoIndex, beforeInstallEvent }: State) {
return (
<div class={style.intro}>
<div>
@@ -120,7 +191,7 @@ export default class Intro extends Component<Props, State> {
<img class={style.demoIcon} src={demo.iconUrl} alt="" decoding="async" />
{fetchingDemoIndex === i &&
<div class={style.demoLoading}>
<loading-spinner class={style.demoLoadingSpinner}/>
<loading-spinner class={style.demoLoadingSpinner} />
</div>
}
</div>
@@ -132,11 +203,20 @@ export default class Intro extends Component<Props, State> {
)}
</ul>
</div>
{beforeInstallEvent &&
<button
type="button"
class={style.installButton}
onClick={this.onInstallClick}
>
Install
</button>
}
<ul class={style.relatedLinks}>
<li><a href="https://github.com/GoogleChromeLabs/squoosh/">View the code</a></li>
<li><a href="https://github.com/GoogleChromeLabs/squoosh/issues">Report a bug</a></li>
<li>
<a href="https://github.com/GoogleChromeLabs/squoosh/blob/master/README.md#privacy">
<a href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy">
Privacy
</a>
</li>

32
src/components/intro/missing-types.d.ts vendored Normal file
View File

@@ -0,0 +1,32 @@
/**
* The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
* before a user is prompted to "install" a web site to a home screen on mobile.
*/
interface BeforeInstallPromptEvent extends Event {
/**
* Returns an array of DOMString items containing the platforms on which the event was dispatched.
* This is provided for user agents that want to present a choice of versions to the user such as,
* for example, "web" or "play" which would allow the user to chose between a web version or
* an Android version.
*/
readonly platforms: Array<string>;
/**
* Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
*/
readonly userChoice: Promise<{
outcome: 'accepted' | 'dismissed',
platform: string
}>;
/**
* Allows a developer to show the install prompt at a time of their own choosing.
* This method returns a Promise.
*/
prompt(): Promise<void>;
}
interface WindowEventMap {
"beforeinstallprompt": BeforeInstallPromptEvent;
}

25
src/components/intro/style.scss
View File

@@ -170,6 +170,31 @@
--color: #fff;
}
.install-button {
composes: unbutton from '../../lib/util.scss';
&:hover,
&:focus {
background: #504488;
}
background: #5D509E;
border: 1px solid #e8e8e8;
color: #fff;
padding: 14px;
font-size: 1.3rem;
position: absolute;
top: 1rem;
right: 1rem;
animation: fade-in .3s ease-in-out;
}
@keyframes fade-in {
from { opacity: 0; }
}
.related-links {
display: flex;
padding: 0;

10
src/index.ts
View File

@@ -13,11 +13,19 @@ if (!('customElements' in self)) {
}
if (typeof PRERENDER === 'undefined') {
// Determine the current display mode.
let displayMode = 'browser';
const mqStandAlone = '(display-mode: standalone)';
if (navigator.standalone || window.matchMedia(mqStandAlone).matches) {
displayMode = 'standalone';
}
// Setup analytics
window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
ga('create', 'UA-128752250-1', 'auto');
ga('set', 'transport', 'beacon');
ga('set', 'dimension1', displayMode);
ga('send', 'pageview');
// Load the GA script
// Load the GA script
const s = document.createElement('script');
s.src = 'https://www.google-analytics.com/analytics.js';
document.head!.appendChild(s);

4
src/manifest.json
View File

@@ -1,7 +1,7 @@
{
"name": "Squoosh",
"short_name": "Squoosh",
"start_url": "/",
"start_url": "/?utm_medium=PWA&utm_source=launcher",
"display": "standalone",
"orientation": "any",
"background_color": "#fff",
@@ -20,7 +20,7 @@
}
],
"share_target": {
"action": "/?share-target",
"action": "/?utm_medium=PWA&utm_source=share-target&share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {

4
src/missing-types.d.ts vendored
View File

@@ -39,3 +39,7 @@ declare var ga: {
(...args: any[]): void;
q: any[];
};
interface Navigator {
readonly standalone: boolean;
}