Handle vectors (GoogleChromeLabs#187)

* Allow loading SVG. Fixes GoogleChromeLabs#138. I also made the resizer vector-aware, so you can resize the image larger & stay sharp. * Handling SVG without width/height set. * Simplifying maths * Doh, case sensitive
alisaitbilgi · Oct 11, 2018 · abf73a2 · abf73a2
1 parent 405f7ca
commit abf73a2
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 32 deletions.
diff --git a/src/codecs/resize/options.tsx b/src/codecs/resize/options.tsx
@@ -4,6 +4,7 @@ import { bind, inputFieldValueAsNumber } from '../../lib/util';
 import { ResizeOptions } from './resize';
 
 interface Props {
+  isVector: Boolean;
   options: ResizeOptions;
   aspect: number;
   onChange(newOptions: ResizeOptions): void;
@@ -63,7 +64,7 @@ export default class ResizerOptions extends Component<Props, State> {
     this.form!.width.value = Math.round(height * this.props.aspect);
   }
 
-  render({ options, aspect }: Props, { maintainAspect }: State) {
+  render({ options, aspect, isVector }: Props, { maintainAspect }: State) {
     return (
       <form ref={el => this.form = el}>
         <label>
@@ -73,6 +74,7 @@ export default class ResizerOptions extends Component<Props, State> {
             value={options.method}
             onChange={this.onChange}
           >
+            {isVector && <option value="vector">Vector</option>}
             <option value="browser-pixelated">Browser pixelated</option>
             <option value="browser-low">Browser low quality</option>
             <option value="browser-medium">Browser medium quality</option>

diff --git a/src/codecs/resize/resize.ts b/src/codecs/resize/resize.ts
@@ -1,21 +1,28 @@
-import { nativeResize, NativeResizeMethod } from '../../lib/util';
+import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
 
-export function resize(data: ImageData, opts: ResizeOptions): ImageData {
+function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
+  const currentAspect = sw / sh;
+  const endAspect = dw / dh;
+
+  if (endAspect > currentAspect) {
+    const newSh = sw / endAspect;
+    const newSy = (sh - newSh) / 2;
+    return { sw, sh: newSh, sx: 0, sy: newSy };
+  }
+
+  const newSw = sh * endAspect;
+  const newSx = (sw - newSw) / 2;
+  return { sh, sw: newSw, sx: newSx, sy: 0 };
+}
+
+export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
   let sx = 0;
   let sy = 0;
   let sw = data.width;
   let sh = data.height;
 
   if (opts.fitMethod === 'cover') {
-    const currentAspect = data.width / data.height;
-    const endAspect = opts.width / opts.height;
-    if (endAspect > currentAspect) {
-      sh = opts.height / (opts.width / data.width);
-      sy = (data.height - sh) / 2;
-    } else {
-      sw = opts.width / (opts.height / data.height);
-      sx = (data.width - sw) / 2;
-    }
+    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
   }
 
   return nativeResize(
@@ -24,18 +31,45 @@ export function resize(data: ImageData, opts: ResizeOptions): ImageData {
   );
 }
 
+export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions): ImageData {
+  let sx = 0;
+  let sy = 0;
+  let sw = data.width;
+  let sh = data.height;
+
+  if (opts.fitMethod === 'cover') {
+    ({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
+  }
+
+  return drawableToImageData(data, {
+    sx, sy, sw, sh,
+    width: opts.width, height: opts.height,
+  });
+}
+
+type BitmapResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
+
 export interface ResizeOptions {
   width: number;
   height: number;
-  method: 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
+  method: 'vector' | BitmapResizeMethods;
   fitMethod: 'stretch' | 'cover';
 }
 
+export interface BitmapResizeOptions extends ResizeOptions {
+  method: BitmapResizeMethods;
+}
+
+export interface VectorResizeOptions extends ResizeOptions {
+  method: 'vector';
+}
+
 export const defaultOptions: ResizeOptions = {
   // Width and height will always default to the image size.
   // This is set elsewhere.
   width: 1,
   height: 1,
+  // This will be set to 'vector' if the input is SVG.
   method: 'browser-high',
   fitMethod: 'stretch',
 };
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { bind, linkRef, Fileish } from '../../lib/util';
+import { bind, linkRef, Fileish, blobToImg, drawableToImageData, blobToText } from '../../lib/util';
 import * as style from './style.scss';
 import Output from '../Output';
 import Options from '../Options';
@@ -45,6 +45,7 @@ type Orientation = 'horizontal' | 'vertical';
 export interface SourceImage {
   file: File;
   data: ImageData;
+  vectorImage?: HTMLImageElement;
 }
 
 interface EncodedImage {
@@ -81,7 +82,14 @@ async function preprocessImage(
 ): Promise<ImageData> {
   let result = source.data;
   if (preprocessData.resize.enabled) {
-    result = resizer.resize(result, preprocessData.resize);
+    if (preprocessData.resize.method === 'vector' && source.vectorImage) {
+      result = resizer.vectorResize(
+        source.vectorImage,
+        preprocessData.resize as resizer.VectorResizeOptions,
+      );
+    } else {
+      result = resizer.resize(result, preprocessData.resize as resizer.BitmapResizeOptions);
+    }
   }
   if (preprocessData.quantizer.enabled) {
     result = await quantizer.quantize(result, preprocessData.quantizer);
@@ -120,6 +128,31 @@ async function compressImage(
   );
 }
 
+async function processSvg(blob: Blob): Promise<HTMLImageElement> {
+  // Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
+  // In Chrome it loads, but drawImage behaves weirdly.
+  // This function sets width/height if it isn't already set.
+  const parser = new DOMParser();
+  const text = await blobToText(blob);
+  const document = parser.parseFromString(text, 'image/svg+xml');
+  const svg = document.documentElement;
+
+  if (svg.hasAttribute('width') && svg.hasAttribute('height')) {
+    return blobToImg(blob);
+  }
+
+  const viewBox = svg.getAttribute('viewBox');
+  if (viewBox === null) throw Error('SVG must have width/height or viewBox');
+
+  const viewboxParts = viewBox.split(/\s+/);
+  svg.setAttribute('width', viewboxParts[2]);
+  svg.setAttribute('height', viewboxParts[3]);
+
+  const serializer = new XMLSerializer();
+  const newSource = serializer.serializeToString(document);
+  return blobToImg(new Blob([newSource], { type: 'image/svg+xml' }));
+}
+
 export default class App extends Component<Props, State> {
   widthQuery = window.matchMedia('(min-width: 500px)');
 
@@ -228,11 +261,22 @@ export default class App extends Component<Props, State> {
   async updateFile(file: File) {
     this.setState({ loading: true });
     try {
-      const data = await decodeImage(file);
+      let data: ImageData;
+      let vectorImage: HTMLImageElement | undefined;
+
+      // Special-case SVG. We need to avoid createImageBitmap because of
+      // https://bugs.chromium.org/p/chromium/issues/detail?id=606319.
+      // Also, we cache the HTMLImageElement so we can perform vector resizing later.
+      if (file.type === 'image/svg+xml') {
+        vectorImage = await processSvg(file);
+        data = drawableToImageData(vectorImage);
+      } else {
+        data = await decodeImage(file);
+      }
 
-      let newState = {
+      let newState: State = {
         ...this.state,
-        source: { data, file },
+        source: { data, file, vectorImage },
         loading: false,
       };
 
@@ -241,6 +285,7 @@ export default class App extends Component<Props, State> {
         newState = cleanMerge(newState, `images.${i}.preprocessorState.resize`, {
           width: data.width,
           height: data.height,
+          method: vectorImage ? 'vector' : 'browser-high',
         });
       }
 
@@ -349,11 +394,10 @@ export default class App extends Component<Props, State> {
                 />
                 {images.map((image, index) => (
                   <Options
+                    source={source}
                     orientation={orientation}
-                    sourceAspect={source.data.width / source.data.height}
                     imageIndex={index}
                     imageFile={image.file}
-                    sourceImageFile={source && source.file}
                     downloadUrl={image.downloadUrl}
                     preprocessorState={image.preprocessorState}
                     encoderState={image.encoderState}

diff --git a/src/components/Options/index.tsx b/src/components/Options/index.tsx
@@ -38,6 +38,7 @@ import { ResizeOptions } from '../../codecs/resize/resize';
 import { PreprocessorState } from '../../codecs/preprocessors';
 import FileSize from '../FileSize';
 import { DownloadIcon } from '../../lib/icons';
+import { SourceImage } from '../App';
 
 const encoderOptionsComponentMap = {
   [identity.type]: undefined,
@@ -62,9 +63,8 @@ const titles = {
 
 interface Props {
   orientation: 'horizontal' | 'vertical';
-  sourceAspect: number;
+  source: SourceImage;
   imageIndex: number;
-  sourceImageFile?: File;
   imageFile?: Fileish;
   downloadUrl?: string;
   encoderState: EncoderState;
@@ -129,8 +129,7 @@ export default class Options extends Component<Props, State> {
 
   render(
     {
-      sourceImageFile,
-      sourceAspect,
+      source,
       imageIndex,
       imageFile,
       downloadUrl,
@@ -178,7 +177,8 @@ export default class Options extends Component<Props, State> {
               </label>
               {preprocessorState.resize.enabled &&
                 <ResizeOptionsComponent
-                  aspect={sourceAspect}
+                  isVector={Boolean(source.vectorImage)}
+                  aspect={source.data.width / source.data.height}
                   options={preprocessorState.resize}
                   onChange={this.onResizeOptionsChange}
                 />
@@ -223,7 +223,7 @@ export default class Options extends Component<Props, State> {
             increaseClass={style.increase}
             decreaseClass={style.decrease}
             file={imageFile}
-            compareTo={imageFile === sourceImageFile ? undefined : sourceImageFile}
+            compareTo={imageFile === source.file ? undefined : source.file}
           />
 
           {(downloadUrl && imageFile) && (

diff --git a/src/lib/util.ts b/src/lib/util.ts
@@ -95,6 +95,10 @@ export function blobToArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
   return new Response(blob).arrayBuffer();
 }
 
+export function blobToText(blob: Blob): Promise<string> {
+  return new Response(blob).text();
+}
+
 const magicNumberToMimeType = new Map<RegExp, string>([
   [/^%PDF-/, 'application/pdf'],
   [/^GIF87a/, 'image/gif'],
@@ -122,7 +126,7 @@ export async function sniffMimeType(blob: Blob): Promise<string> {
   return '';
 }
 
-async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
+export async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
   const url = URL.createObjectURL(blob);
 
   try {
@@ -147,16 +151,37 @@ async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
   }
 }
 
-function drawableToImageData(drawable: ImageBitmap | HTMLImageElement): ImageData {
+interface DrawableToImageDataOptions {
+  width?: number;
+  height?: number;
+  sx?: number;
+  sy?: number;
+  sw?: number;
+  sh?: number;
+}
+
+export function drawableToImageData(
+  drawable: ImageBitmap | HTMLImageElement,
+  opts: DrawableToImageDataOptions = {},
+): ImageData {
+  const {
+    width = drawable.width,
+    height = drawable.height,
+    sx = 0,
+    sy = 0,
+    sw = drawable.width,
+    sh = drawable.height,
+  } = opts;
+
   // Make canvas same size as image
   const canvas = document.createElement('canvas');
-  canvas.width = drawable.width;
-  canvas.height = drawable.height;
+  canvas.width = width;
+  canvas.height = height;
   // Draw image onto canvas
   const ctx = canvas.getContext('2d');
   if (!ctx) throw new Error('Could not create canvas context');
-  ctx.drawImage(drawable, 0, 0);
-  return ctx.getImageData(0, 0, drawable.width, drawable.height);
+  ctx.drawImage(drawable, sx, sy, sw, sh, 0, 0, width, height);
+  return ctx.getImageData(0, 0, width, height);
 }
 
 export async function nativeDecode(blob: Blob): Promise<ImageData> {