Merge pull request #808 from kaedroho/issue-800

Convert P images with transparency into RGBA

CHANGELOG.txt

@@ -16,10 +16,13 @@ Changelog
  * Fixed a regression where form builder submissions containing a number field would fail with a JSON serialisation error
  * Fix: Resizing an image with a focal point equal to the image size would result in a divide-by-zero error
  * Fix: Focal point indicator would sometimes be positioned incorrectly for small or thin images
+ * Fix: Focal point chooser background colour changed to grey to make working with transparent images easier
  * Fix: Elasticsearch configuration now supports specifying HTTP authentication parameters as part of the URL, and defaults to ports 80 (HTTP) and 443 (HTTPS) if port number not specified
  * Fixed a TypeError when previewing pages that use RoutablePageMixin
  * Fix: Rendering image with missing file in rich text no longer crashes the entire page
  * Fix: IOErrors thrown by underlying image libraries that are not reporting a missing image file are no longer caught
+ * Fix: Minimum Pillow version bumped to 2.6.1 to work around a crash when using images with transparency
+ * Fix: Images with transparency are now handled better when being used in feature detection
 
 
 0.8.1 (05.11.2014)

docs/releases/0.8.2.rst

@@ -20,10 +20,13 @@ Bug fixes
  * Fixed a regression where form builder submissions containing a number field would fail with a JSON serialisation error
  * Resizing an image with a focal point equal to the image size would result in a divide-by-zero error
  * Focal point indicator would sometimes be positioned incorrectly for small or thin images
+ * Fix: Focal point chooser background colour changed to grey to make working with transparent images easier
  * Elasticsearch configuration now supports specifying HTTP authentication parameters as part of the URL, and defaults to ports 80 (HTTP) and 443 (HTTPS) if port number not specified
  * Fixed a TypeError when previewing pages that use RoutablePageMixin
  * Rendering image with missing file in rich text no longer crashes the entire page
  * IOErrors thrown by underlying image libraries that are not reporting a missing image file are no longer caught
+ * Fix: Minimum Pillow version bumped to 2.6.1 to work around a crash when using images with transparency
+ * Fix: Images with transparency are now handled better when being used in feature detection
 
 Upgrade considerations
 ======================

setup.py

@@ -35,7 +35,7 @@ install_requires = [
     "django-modelcluster>=0.4",
     "django-taggit==0.12.2",
     "django-treebeard==2.0",
-    "Pillow>=2.3.0",
+    "Pillow>=2.6.1",
     "beautifulsoup4>=4.3.2",
     "html5lib==0.999",
     "Unidecode>=0.04.14",

wagtail/wagtailimages/backends/pillow.py

@@ -16,20 +16,20 @@ class PillowBackend(BaseImageBackend):
     def save_image(self, image, output, format):
         image.save(output, format, quality=self.quality)
 
+    def _to_rgb(self, image):
+        if image.mode not in ['RGB', 'RGBA']:
+            if 'transparency' in image.info and isinstance(image.info['transparency'], bytes):
+                image = image.convert('RGBA')
+            else:
+                image = image.convert('RGB')
+        return image
+
     def resize(self, image, size):
-        if image.mode in ['1', 'P']:
-            image = image.convert('RGB')
-        return image.resize(size, PIL.Image.ANTIALIAS)
+        return self._to_rgb(image).resize(size, PIL.Image.ANTIALIAS)
 
     def crop(self, image, rect):
         return image.crop(rect)
 
     def image_data_as_rgb(self, image):
-        # https://github.com/thumbor/thumbor/blob/f52360dc96eedd9fc914fcf19eaf2358f7e2480c/thumbor/engines/pil.py#L206-L215
-        if image.mode not in ['RGB', 'RGBA']:
-            if 'A' in image.mode:
-                image = image.convert('RGBA')
-            else:
-                image = image.convert('RGB')
-
+        image = self._to_rgb(image)
         return image.mode, image.tostring()

wagtail/wagtailimages/static/wagtailimages/js/focal-point-chooser.js

@@ -3,6 +3,7 @@ var jcropapi;
 function setupJcrop(image, original, focalPointOriginal, fields){
     image.Jcrop({
         trueSize: [original.width, original.height],
+        bgColor: "rgb(192, 192, 192)",
         onSelect: function(box) {
             var x = Math.floor((box.x + box.x2) / 2);
             var y = Math.floor((box.y + box.y2) / 2);