blueimp-load-image - npm Package Compare versions

Comparing version 5.11.0 to 5.12.0

package.json

 {
   "name": "blueimp-load-image",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "title": "JavaScript Load Image",
@@ -5,0 +5,0 @@ "description": "JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled, cropped or rotated HTML img or canvas element. It also provides methods to parse image metadata to extract IPTC and Exif tags as well as embedded thumbnail images, to overwrite the Exif Orientation value and to restore the complete image header after resizing.",

README.md

@@ -18,3 +18,3 @@ # JavaScript Load Image
     - [Function signature](#function-signature)
-    - [Canceling event handling](#canceling-event-handling)
+    - [Cancel image loading](#cancel-image-loading)
     - [Callback arguments](#callback-arguments)
@@ -127,3 +127,4 @@ - [Error handling](#error-handling)
 
-In your application code, use the `loadImage()` function like this:
+In your application code, use the `loadImage()` function with
+[callback](#callback) style:
 
@@ -142,5 +143,4 @@ ```js
 
-Or use the
-[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-based API like this ([requires](#requirements) a polyfill for older browsers):
+Or use the [Promise](#promise) based API like this ([requires](#requirements) a
+polyfill for older browsers):
 
@@ -280,9 +280,17 @@ ```js
 
-#### Canceling event handling
+#### Cancel image loading
 
-The `img` element or
-[FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader) object
-returned by the `loadImage()` function allows to cancel event handling by
-setting the `onload` and `onerror` event handlers to null:
+Some browsers (e.g. Chrome) will cancel the image loading process if the `src`
+property of an `img` element is changed.  
+To avoid unnecessary requests, we can use the
+[data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
+of a 1x1 pixel transparent GIF image as `src` target to cancel the original
+image download.
 
+To disable callback handling, we can also unset the image event handlers and for
+maximum browser compatibility, cancel the file reading process if the returned
+object is a
+[FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader)
+instance:
+
 ```js
@@ -297,6 +305,25 @@ var loadingImage = loadImage(
 
-// Cancel event handling:
-loadingImage.onload = loadingImage.onerror = null
+if (loadingImage) {
+  // Unset event handling for the loading image:
+  loadingImage.onload = loadingImage.onerror = null
+
+  // Cancel image loading process:
+  if (loadingImage.abort) {
+    // FileReader instance, stop the file reading process:
+    loadingImage.abort()
+  } else {
+    // HTMLImageElement element, cancel the original image request by changing
+    // the target source to the data URL of a 1x1 pixel transparent image GIF:
+    loadingImage.src =
+      'data:image/gif;base64,' +
+      'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+  }
+}
 ```
 
+**Please note:**  
+The `img` element (or `FileReader` instance) for the loading image is only
+returned when using the callback style API and not available with the
+[Promise](#promise) based API.
+
 #### Callback arguments
@@ -303,0 +330,0 @@

No alert changes

Improved metrics

Total package byte prevSize

176197

increased by0.56%

Number of lines in readme file

1071

increased by2.59%

No dependency changes