blueimp · blueimp · Nov 11, 2018 · Nov 7, 2018 · Nov 7, 2018 · Nov 7, 2018
diff --git a/README.md b/README.md
@@ -44,8 +44,13 @@ Or alternatively, choose which components you want to include:
 <script src="js/load-image-scale.js"></script>
 <script src="js/load-image-meta.js"></script>
 <script src="js/load-image-fetch.js"></script>
+
 <script src="js/load-image-exif.js"></script>
 <script src="js/load-image-exif-map.js"></script>
+
+<script src="js/load-image-iptc.js"></script>
+<script src="js/load-image-iptc-map.js"></script>
+
 <script src="js/load-image-orientation.js"></script>
 ```
 
@@ -314,6 +319,40 @@ disable certain aspects of the parser:
 * **disableExifSub**: Disables parsing of the Exif Sub IFD.
 * **disableExifGps**: Disables parsing of the Exif GPS Info IFD.
 
+### Iptc parser
+If you include the Load Image Iptc Parser extension, the argument passed to the
+callback for **parseMetaData** will contain the additional property **iptc** if
+Iptc data could be found in the given image.  
+The **iptc** object stores the parsed Iptc tags:
+
+```js
+var objectname = data.iptc[0x5];
+```
+
+It also provides an **iptc.get()** method to retrieve the tag value via the
+tag's mapped name:
+
+```js
+var objectname = data.iptc.get('ObjectName');
+```
+
+By default, the only available mapped names are **ObjectName**.
+If you also include the Load Image Iptc Map library, additional tag mappings
+become available, as well as two additional methods, **iptc.getText()** and
+**iptc.getAll()**:
+
+```js
+var keywords = data.iptc.getText('Keywords'); // e.g.: ['Weather','Sky']
+
+// A map of all parsed tags with their mapped names as keys and their text values:
+var allTags = data.iptc.getAll();
+```
+
+The Iptc parser also adds additional options for the parseMetaData method, to
+disable certain aspects of the parser:
+
+* **disableIptc**: Disables Iptc parsing.
+
 ## License
 The JavaScript Load Image script is released under the
 [MIT license](https://opensource.org/licenses/MIT).

diff --git a/iptc.html b/iptc.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+/*
+ * JavaScript Load Image IPTC Demo
+ * https://github.com/blueimp/JavaScript-Load-Image
+ *
+ * Copyright 2011, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ */
+-->
+<html lang="en">
+<head>
+<!--[if IE]>
+<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<![endif]-->
+<meta charset="utf-8">
+<title>JavaScript Load Image</title>
+<meta name="description" content="JavaScript Load Image is a library to load images provided as File or Blob objects or via URL. It returns an optionally scaled and/or cropped HTML img or canvas element. It also provides a method to parse image meta data to extract Exif or Iptc tags and thumbnails and to restore the complete image header after resizing.">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!-- Jcrop is not required by JavaScript Load Image, but included for the demo -->
+<link rel="stylesheet" href="css/vendor/jquery.Jcrop.css">
+<link rel="stylesheet" href="css/demo.css">
+</head>
+<body>
+<h1>JavaScript Load Image IPTC Demo</h1>
+<p><a href="https://github.com/blueimp/JavaScript-Load-Image">JavaScript Load Image</a> is a library to load images provided as <a href="https://developer.mozilla.org/en/DOM/File">File</a> or <a href="https://developer.mozilla.org/en/DOM/Blob">Blob</a> objects or via URL.<br>
+It returns an optionally <strong>scaled</strong> and/or <strong>cropped</strong> HTML <a href="https://developer.mozilla.org/en/docs/HTML/Element/Img">img</a> or <a href="https://developer.mozilla.org/en/docs/HTML/Canvas">canvas</a> element.<br>
+It also provides a method to parse image meta data to extract <a href="https://iptc.org/standards/photo-metadata">Iptc</a> tags and thumbnails and to restore the complete image header after resizing.</p>
+<ul class="navigation">
+    <li><a href="https://github.com/blueimp/JavaScript-Load-Image/tags">Download</a></li>
+    <li><a href="https://github.com/blueimp/JavaScript-Load-Image">Source Code</a></li>
+    <li><a href="https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md">Documentation</a></li>
+    <li><a href="test/">Test</a></li>
+    <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
+</ul>
+<br>
+<h2>Select an image file</h2>
+<p><input type="file" id="file-input"></p>
+<p>Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
+<br>
+<h2>Result</h2>
+<p id="actions" style="display:none;">
+	<button type="button" id="edit">Edit</button>
+	<button type="button" id="crop">Crop</button>
+</p>
+<div id="result" class="result">
+    <p>This demo works only in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p>
+</div>
+<br>
+<div id="iptc" class="exif" style="display:none;">
+    <h2>Iptc meta data</h2>
+    <p id="thumbnail" class="thumbnail" style="display:none;"></p>
+    <table></table>
+</div>
+<br>
+<script src="js/load-image.js"></script>
+<script src="js/load-image-scale.js"></script>
+<script src="js/load-image-meta.js"></script>
+<script src="js/load-image-fetch.js"></script>
+
+<script src="js/load-image-iptc.js"></script>
+<script src="js/load-image-iptc-map.js"></script>
+
+<script src="js/load-image-orientation.js"></script>
+<!-- jQuery and Jcrop are not required by JavaScript Load Image, but included for the demo -->
+<script src="js/vendor/jquery.js"></script>
+<script src="js/vendor/jquery.Jcrop.js"></script>
+<script src="js/demo/demo-iptc.js"></script>
+</body>
+</html>
diff --git a/js/demo/demo-iptc.js b/js/demo/demo-iptc.js
@@ -0,0 +1,165 @@
+/*
+ * JavaScript Load Image Demo JS
+ * https://github.com/blueimp/JavaScript-Load-Image
+ *
+ * Copyright 2013, Sebastian Tschan
+ * Copyright 2018, Dave Bevan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * https://opensource.org/licenses/MIT
+ */
+
+/* global loadImage, HTMLCanvasElement, $ */
+
+$(function () {
+  'use strict'
+
+  var result = $('#result')
+  var iptcNode = $('#iptc')
+  var actionsNode = $('#actions')
+  var currentFile
+  var coordinates
+
+  function displayIptcData (iptc) {
+    var tags = iptc.getAll()
+    var table = iptcNode.find('table').empty()
+    var row = $('<tr></tr>')
+    var cell = $('<td></td>')
+    var prop
+    for (prop in tags) {
+      if (tags.hasOwnProperty(prop)) {
+        table.append(
+          row.clone()
+            .append(cell.clone().text(prop))
+            .append(cell.clone().text(tags[prop]))
+        )
+      }
+    }
+    iptcNode.show()
+  }
+
+  function updateResults (img, data) {
+    var fileName = currentFile.name
+    var href = img.src
+    var dataURLStart
+    var content
+    if (!(img.src || img instanceof HTMLCanvasElement)) {
+      content = $('<span>Loading image file failed</span>')
+    } else {
+      if (!href) {
+        href = img.toDataURL(currentFile.type + 'REMOVEME')
+        // Check if file type is supported for the dataURL export:
+        dataURLStart = 'data:' + currentFile.type
+        if (href.slice(0, dataURLStart.length) !== dataURLStart) {
+          fileName = fileName.replace(/\.\w+$/, '.png')
+        }
+      }
+      content = $('<a target="_blank">').append(img)
+        .attr('download', fileName)
+        .attr('href', href)
+    }
+    result.children().replaceWith(content)
+    if (img.getContext) {
+      actionsNode.show()
+    }
+    if (data && data.iptc) {
+      displayIptcData(data.iptc)
+    }
+  }
+
+  function displayImage (file, options) {
+    currentFile = file
+    if (!loadImage(
+      file,
+      updateResults,
+      options
+    )) {
+      result.children().replaceWith(
+        $('<span>' +
+          'Your browser does not support the URL or FileReader API.' +
+          '</span>')
+      )
+    }
+  }
+
+  function dropChangeHandler (e) {
+    e.preventDefault()
+    e = e.originalEvent
+    var target = e.dataTransfer || e.target
+    var file = target && target.files && target.files[0]
+    var options = {
+      maxWidth: result.width(),
+      canvas: true,
+      pixelRatio: window.devicePixelRatio,
+      downsamplingRatio: 0.5,
+      orientation: true
+    }
+    if (!file) {
+      return
+    }
+    iptcNode.hide()
+    displayImage(file, options)
+  }
+
+  // Hide URL/FileReader API requirement message in capable browsers:
+  if (window.createObjectURL || window.URL || window.webkitURL ||
+      window.FileReader) {
+    result.children().hide()
+  }
+
+  $(document)
+    .on('dragover', function (e) {
+      e.preventDefault()
+      e = e.originalEvent
+      e.dataTransfer.dropEffect = 'copy'
+    })
+    .on('drop', dropChangeHandler)
+
+  $('#file-input')
+    .on('change', dropChangeHandler)
+
+  $('#edit')
+    .on('click', function (event) {
+      event.preventDefault()
+      var imgNode = result.find('img, canvas')
+      var img = imgNode[0]
+      var pixelRatio = window.devicePixelRatio || 1
+      imgNode.Jcrop({
+        setSelect: [
+          40,
+          40,
+          (img.width / pixelRatio) - 40,
+          (img.height / pixelRatio) - 40
+        ],
+        onSelect: function (coords) {
+          coordinates = coords
+        },
+        onRelease: function () {
+          coordinates = null
+        }
+      }).parent().on('click', function (event) {
+        event.preventDefault()
+      })
+    })
+
+  $('#crop')
+    .on('click', function (event) {
+      event.preventDefault()
+      var img = result.find('img, canvas')[0]
+      var pixelRatio = window.devicePixelRatio || 1
+      if (img && coordinates) {
+        updateResults(loadImage.scale(img, {
+          left: coordinates.x * pixelRatio,
+          top: coordinates.y * pixelRatio,
+          sourceWidth: coordinates.w * pixelRatio,
+          sourceHeight: coordinates.h * pixelRatio,
+          minWidth: result.width(),
+          maxWidth: result.width(),
+          pixelRatio: pixelRatio,
+          downsamplingRatio: 0.5
+        }))
+        coordinates = null
+      }
+    })
+})