From 189ef9638f64be7b732b6e84dcc364e0c8593a37 Mon Sep 17 00:00:00 2001
From: Max Battcher <me@worldmaker.net>
Date: Mon, 25 Sep 2017 18:11:25 -0400
Subject: [PATCH] Add image quality options to blob-util (#20014)

* Add image quality options to blob-util

* Remove unapplicable doc comment note from blob-util
---
 types/blob-util/blob-util-tests.ts |  5 ++++
 types/blob-util/index.d.ts         | 37 +++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/types/blob-util/blob-util-tests.ts b/types/blob-util/blob-util-tests.ts
index d05b401116..ec087b2d6a 100644
--- a/types/blob-util/blob-util-tests.ts
+++ b/types/blob-util/blob-util-tests.ts
@@ -5,6 +5,8 @@ const testBlob = new Blob(['abcd']);
 blobUtil.base64StringToBlob('abcd'); // $ExpectType Promise<Blob>
 blobUtil.createObjectURL(testBlob); // $ExpectType string
 blobUtil.imgSrcToBlob('test.jpg'); // $ExpectType Promise<Blob>
+blobUtil.imgSrcToBlob('http://some-other-site.com/img.jpg', 'image/jpeg', 'Anonymous', 1.0); // $ExpectType Promise<Blob>
+blobUtil.imgSrcToBlob('test.jpg', 'image/jpeg', undefined, 0.7); // $ExpectType Promise<Blob>
 blobUtil.createBlob(['abcd']); // $ExpectType Blob
 blobUtil.arrayBufferToBlob(new ArrayBuffer(0)); // $ExpectType Promise<Blob>
 blobUtil.binaryStringToBlob('0101'); // $ExpectType Promise<Blob>
@@ -12,7 +14,10 @@ blobUtil.blobToArrayBuffer(testBlob); // $ExpectType Promise<ArrayBuffer>
 blobUtil.blobToBase64String(testBlob); // $ExpectType Promise<string>
 blobUtil.blobToBinaryString(testBlob); // $ExpectType Promise<string>
 blobUtil.canvasToBlob(new HTMLCanvasElement()); // $ExpectType Promise<Blob>
+blobUtil.canvasToBlob(new HTMLCanvasElement(), 'image/webp'); // $ExpectType Promise<Blob>
+blobUtil.canvasToBlob(new HTMLCanvasElement(), 'image/webp', 0.8); // $ExpectType Promise<Blob>
 blobUtil.dataURLToBlob('data:abcd'); // $ExpectType Promise<Blob>
 blobUtil.blobToDataURL(testBlob); // $ExpectType Promise<string>
 blobUtil.imgSrcToDataURL('test.jpg'); // $ExpectType Promise<string>
+blobUtil.imgSrcToDataURL('http://some-other-site.com/img.jpg', 'image/jpeg', 'Anonymous', 1.0); // $ExpectType Promise<string>
 blobUtil.revokeObjectURL('blob:example'); // $ExpectType void
diff --git a/types/blob-util/index.d.ts b/types/blob-util/index.d.ts
index 362b8e012f..3e900f0ecb 100644
--- a/types/blob-util/index.d.ts
+++ b/types/blob-util/index.d.ts
@@ -13,8 +13,39 @@ export function blobToBase64String(blob: Blob): Promise<string>;
 export function base64StringToBlob(base64: string, type?: string): Promise<Blob>;
 export function dataURLToBlob(dataURL: string): Promise<Blob>;
 export function blobToDataURL(blob: Blob): Promise<string>;
-export function imgSrcToDataURL(src: string, type?: string, crossOrigin?: string): Promise<string>;
-export function canvasToBlob(canvas: HTMLCanvasElement, type?: string): Promise<Blob>;
-export function imgSrcToBlob(src: string, type?: string, crossOrigin?: string): Promise<Blob>;
+
+/**
+ * Convert an image's src URL to a data URL by loading the image and painting it to a canvas.
+ *
+ * Note: this will coerce the image to the desired content type, and it will only paint the first frame of an animated GIF.
+ *
+ * @param src
+ * @param type the content type (optional, defaults to 'image/png')
+ * @param crossOrigin for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors
+ * @param quality a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp'
+ */
+export function imgSrcToDataURL(src: string, type?: string, crossOrigin?: string, quality?: number): Promise<string>;
+
+/**
+ * Convert a canvas to a Blob.
+ *
+ * @param src
+ * @param type the content type (optional, defaults to 'image/png')
+ * @param quality a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp'
+ */
+export function canvasToBlob(canvas: HTMLCanvasElement, type?: string, quality?: number): Promise<Blob>;
+
+/**
+ * Convert an image's src URL to a Blob by loading the image and painting it to a canvas.
+ *
+ * Note: this will coerce the image to the desired content type, and it will only paint the first frame of an animated GIF.
+ *
+ * @param src
+ * @param type the content type (optional, defaults to 'image/png')
+ * @param crossOrigin for CORS-enabled images, set this to 'Anonymous' to avoid "tainted canvas" errors
+ * @param quality a number between 0 and 1 indicating image quality if the requested type is 'image/jpeg' or 'image/webp'
+ */
+export function imgSrcToBlob(src: string, type?: string, crossOrigin?: string, quality?: number): Promise<Blob>;
+
 export function arrayBufferToBlob(arrayBuff: ArrayBuffer, type?: string): Promise<Blob>;
 export function blobToArrayBuffer(blob: Blob): Promise<ArrayBuffer>;