Update Cropit to 5.1

Switch all images to webp to make them smaller and higher quality
This will automatically allow transparent backgrounds as soon as Google updates chromium to support alpha channels in canvas.toDataURL

Author: jjeffryes

js/views/itemEditVw.js

@@ -392,8 +392,8 @@ module.exports = baseVw.extend({
         canvas.height = imgH;
         ctx = canvas.getContext('2d');
         ctx.drawImage(newImage, 0, 0, imgW, imgH);
-        dataURI = canvas.toDataURL('image/jpeg', 0.7);
-        dataURI = dataURI.replace(/^data:image\/(png|jpeg);base64,/, "");
+        dataURI = canvas.toDataURL('image/webp', 0.7);
+        dataURI = dataURI.replace(/^data:image\/(png|jpeg|webp);base64,/, "");
         imageList.push(dataURI);
 
         if (loaded === imageCount) {

js/views/itemVw.js

@@ -4,6 +4,7 @@ var __ = require('underscore'),
     $ = require('jquery'),
     loadTemplate = require('../utils/loadTemplate'),
     localize = require('../utils/localize'),
+    colorbox = require('jquery-colorbox'), // eslint-disable-line
     RatingCl = require('../collections/ratingCl'),
     baseVw = require('./baseVw'),
     buyWizardVw = require('./buyWizardVw'),

js/views/onboardingModal.js

@@ -365,7 +365,7 @@ module.exports = baseModal.extend({
     };
 
     var imageURI = this.$('#image-cropper').cropit('export', {
-      type: 'image/jpeg',
+      type: 'image/webp',
       quality: 0.75,
       originalSize: false
     });
@@ -379,7 +379,7 @@ module.exports = baseModal.extend({
     }
 
     if (imageURI) {
-      imageURI = imageURI.replace(/^data:image\/(png|jpeg);base64,/, '');
+      imageURI = imageURI.replace(/^data:image\/(png|jpeg|webp);base64,/, '');
 
       this.avatarUpload(imageURI).done((imgHash) => {
         profileFormData.append('avatar', imgHash);
@@ -520,7 +520,7 @@ module.exports = baseModal.extend({
         var res = event.target.result,
             bannerFormData = new FormData();
 
-        bannerFormData.append('image', res.replace(/^data:image\/(png|jpeg);base64,/, ''));
+        bannerFormData.append('image', res.replace(/^data:image\/(png|jpeg|webp);base64,/, ''));
 
         $.ajax({
           type: 'POST',

js/views/settingsVw.js

@@ -771,11 +771,11 @@ module.exports = Backbone.View.extend({
       var bannerCrop = self.$('#settings-image-cropperBanner');
       if (self.newBanner && bannerCrop.cropit('imageSrc')){
         bannerURI = bannerCrop.cropit('export', {
-          type: 'image/jpeg',
+          type: 'image/webp',
           quality: 0.75,
           originalSize: false
         });
-        bannerURI = bannerURI.replace(/^data:image\/(png|jpeg);base64,/, "");
+        bannerURI = bannerURI.replace(/^data:image\/(png|jpeg|webp);base64,/, "");
         banner64Data.image = bannerURI;
 
         saveToAPI('', '', self.serverUrl + "upload_image", function (data) {
@@ -793,11 +793,11 @@ module.exports = Backbone.View.extend({
     //if an avatar has been set, upload it first and get the hash
     if (self.newAvatar && avatarCrop.cropit('imageSrc')){
       imageURI = avatarCrop.cropit('export', {
-        type: 'image/jpeg',
+        type: 'image/webp',
         quality: 0.75,
         originalSize: false
       });
-      imageURI = imageURI.replace(/^data:image\/(png|jpeg);base64,/, "");
+      imageURI = imageURI.replace(/^data:image\/(png|jpeg|webp);base64,/, "");
       img64Data.image = imageURI;
 
       saveToAPI('', '', self.serverUrl + "upload_image", function (data) {

js/views/userPageVw.js

@@ -1281,13 +1281,13 @@ module.exports = baseVw.extend({
     //var formData = new FormData(this.$el.find('#userPageImageForm')[0]);
     var serverUrl = self.options.userModel.get('serverUrl'),
         imageURI = self.$el.find('#image-cropper').cropit('export', {
-          type: 'image/jpeg',
+          type: 'image/webp',
           quality: 0.75,
           originalSize: false
         });
 
     if (imageURI){
-      imageURI = imageURI.replace(/^data:image\/(png|jpeg);base64,/, "");
+      imageURI = imageURI.replace(/^data:image\/(png|jpeg|webp);base64,/, "");
       var formData = new FormData();
       formData.append('image', imageURI);
       $.ajax({

package.json

@@ -22,7 +22,7 @@
     "backbone": ">=1.2.1",
     "backbone.localstorage": "^1.1.16",
     "chosen": "0.0.2",
-    "cropit": "0.4.5",
+    "cropit": "0.5.1",
     "ini": "^1.3.4",
     "is_js": "0.7.4",
     "jquery": "2.1.4",