DO NOT MERGE: Image crop & resize

README.md

@@ -1,8 +1,32 @@
+# Deploy to Salesforce
 
-# [Flow](https://github.com/sharinpix/demo-apex/tree/flow)
+[<img src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">](https://githubsfdeploy.herokuapp.com?owner=sharinpix&repo=demo-apex&ref=image_crop_resize)
 
-[<img src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">](https://githubsfdeploy.herokuapp.com?owner=sharinpix&repo=demo-apex&ref=flow)
+# Image Crop/Resize
 
-# Work Order token
+Open your Setup and find the Visualforce page named 'SharinPixResizeDemo'. Preview the Visualforce page. Once on the page, you must click on an image so that the resize options will be available. Set a width, height and crop type then click on the 'Resize' button.
 
-[<img src="https://raw.githubusercontent.com/afawcett/githubsfdeploy/master/deploy.png">](https://githubsfdeploy.herokuapp.com?owner=sharinpix&repo=demo-apex&ref=work_order_token)
+## Explaining the crop parameters available
+* scale - The image is made to scale in both horizontally and vertically in order to match the new height and new width. Hence no detail loss but proportion is not maintained.
+
+<img src="https://raw.githubusercontent.com/Akhilesh05/img/master/scale.jpg">
+
+* fit - The image is made to fit either horizontally or vertically in way so as not to lose any detail of the image and also preserve the proportion. Some unused spaces may be left which results in a smaller image than expected.
+
+<img src="https://raw.githubusercontent.com/Akhilesh05/img/master/fit.jpg">
+
+* fill - The image is made to fill completely the new space either horizontally or vertically in way to preserve proportion but some detail might be lost.
+
+<img src="https://raw.githubusercontent.com/Akhilesh05/img/master/fill.jpg">
+
+* pad - Same as for fit but the unused spaces are filled with whitespace.
+
+<img src="https://raw.githubusercontent.com/Akhilesh05/img/master/pad.jpg">
+
+* crop - The image is cropped starting from the center (gravity = center), the image preserves its original zoom level. You can also specify the gravity parameter alongside the crop parameter.
+
+<img src="https://raw.githubusercontent.com/Akhilesh05/img/master/crop.jpg">
+
+* thumb - Used for displaying thumbnails and must always be used alongside the gravity parameter.
+
+<img src="https://raw.githubusercontent.com/Akhilesh05/img/master/thumb.jpg">

src/classes/SharinPixResizeDemo.cls

@@ -0,0 +1,48 @@
+public with sharing class SharinPixResizeDemo {
+    public String albumId {get; set;}
+    public String parameters {get; set;}
+
+    public SharinPixResizeDemo() {
+        albumId = 'SharinPixResizeDemo';
+        parameters = JSON.serialize(new Map<String, Object> {
+            'abilities' => new Map<String, Object> {
+                albumId => new Map<String, Object> {
+                    'Access' => new Map<String, Object> {
+                        'see' => true,
+                        'image_list' => true,
+                        'image_upload' => true
+                    }
+                }
+            },
+            'Id' => albumId
+        });
+    }
+
+    /**
+     * This method resizes/crops an image.
+     * 
+     * @param imageId The image ID of the image that needs to be resized/cropped
+     * @param width The new width of the image
+     * @param height The new height of the image
+     * @param crop The crop type for the resize/crop
+     * @return Returns the URL of the resized/cropped image
+     */
+    @RemoteAction
+    public static String resizeImage(String imageId, Integer width, Integer height, String crop) {
+        sharinpix.Utils sharinPixUtils = new sharinpix.Utils();
+        return (String) sharinPixUtils.getImageExternalUrl(new Map<String, Object> {
+            'image_id' => imageId,
+            'sharinpix' => new Map<String, Object> {
+                'download' => false,
+                'auto' => false,
+                'full_size' => false
+            },
+            'transformations' => new Map<String, Object> {
+                'crop' => crop,
+                'width' => width,
+                'height' => height
+            }
+        }).get('resource_url');
+    }
+
+}

src/classes/SharinPixResizeDemo.cls-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ApexClass xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>40.0</apiVersion>
+    <status>Active</status>
+</ApexClass>

src/package.xml

@@ -1,4 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Package xmlns="http://soap.sforce.com/2006/04/metadata">
-    <version>36.0</version>
+	<types>
+		<members>SharinPixResizeDemo</members>
+		<name>ApexPage</name>
+	</types>
+	<types>
+		<members>SharinPixResizeDemo</members>
+		<name>ApexClass</name>
+	</types>
+	<version>40.0</version>
 </Package>

src/pages/SharinPixResizeDemo.page

@@ -0,0 +1,76 @@
+<apex:page showHeader="true" sidebar="true" controller="SharinPixResizeDemo">
+    <script>
+    var latestImageViewed = null;
+    var newWindow;
+    var ifImageSelected = function (func) {
+        if (latestImageViewed) {
+            newWindow = window.open('https://s-media-cache-ak0.pinimg.com/originals/0c/44/da/0c44dacf1b038014a6f941131c5e8aa2.gif', '_blank');
+            func();
+        } else {
+            alert('Select an image from the album first!');
+        }
+        return false;
+    }
+    var buttonClicked = function() {
+        var height = document.getElementById('image_height').value;
+        var width = document.getElementById('image_width').value;
+        var crop = document.getElementById('crop').value;
+        Visualforce.remoting.Manager.invokeAction(
+            '{! $RemoteAction.SharinPixResizeDemo.resizeImage }',
+            latestImageViewed.public_id, width, height, crop,
+            function(res) {
+                newWindow.location = res;
+            }
+        );
+    }
+    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
+    var eventer = window[eventMethod];
+    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
+    eventer(messageEvent, function(e) {
+        if (e.origin === 'https://app.sharinpix.com') {
+            var data = e.data;
+            switch (data.name) {
+                case 'viewer-image-viewed':
+                    latestImageViewed = data.payload.image;
+                    break;
+                case 'viewer-closed':
+                    latestImageViewed = null
+            }
+        }
+    }, false);
+    setInterval(function() {
+        var mainForm = document.getElementById('{!$Component.main_form}');
+        var warningMessage = document.getElementById('warning_message');
+        if (!mainForm || !warningMessage) return;
+        if (latestImageViewed) {
+            mainForm.style.display = 'block';
+            warningMessage.style.display = 'none';
+        } else {
+            mainForm.style.display = 'none';
+            warningMessage.style.display = 'block';
+        }
+    }, 200)
+    </script>
+    <apex:canvasApp developerName="Albums" height="450px" width="100%" parameters="{! parameters }" />
+    <apex:form onsubmit="return false" id="main_form">
+        <hr />
+        <h1>Resize/Crop</h1><br /><br />
+        Height:<br />
+        <input type="number" value="100" id="image_height" /><br /><br />
+        Width:<br />
+        <input type="number" value="150" id="image_width" /><br /><br />
+        Crop type:<br />
+        <select id="crop">
+            <option>scale</option>
+            <option>fit</option>
+            <option>fill</option>
+            <option>pad</option>
+            <option>crop</option>
+            <option>thumb</option>
+        </select><br /><br />
+        <apex:commandButton value="Resize" id="resize_button" onclick="return ifImageSelected(buttonClicked)" /> <br />
+    </apex:form>
+    <div id="warning_message">
+        Click on an image first...
+    </div>
+</apex:page>

src/pages/SharinPixResizeDemo.page-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ApexPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>40.0</apiVersion>
+    <availableInTouch>false</availableInTouch>
+    <confirmationTokenRequired>false</confirmationTokenRequired>
+    <label>SharinPixResizeDemo</label>
+</ApexPage>