90+ FILTERS

16 Filters + 7 Guest Filters (Instagram) from filters section, and 70+ filters from package section.
Lollipop’s filters are shown real-time while you take a photo with your webcam.
Move to next or previous filter by swiping.

15 ADJUSTMENT & CROPPING & TRANSFORMING TOOLS & UNIQUE FRAMES

Use adjustment tools: Brightness, Contrast, Saturation, Noise, Sharpen, Blur, Circle Blur, Vignette, Effects, Customize RGB… to enhance your images to perfection with ease. Transform your photos with rotating and flipping tools. Crop your photos with quick and easy cropping tool...

Include JS

  <!-- Ideally before closing body tag -->
  <script src="lollipop-integrate.js" charset="utf-8"></script>

Initiate and Open Lollipop

Click on one of these images for a demo of the code below (will automatically open images in specified container).

  var imageEditor = Lollipop.setOptions({
     path: "..", //specify the path to lollipop folder
     appendTo: "body"
  });
  $("img").each(function() {
     $(this).css("cursor", "pointer");
     $(this).on("click", function(e) {
        imageEditor.open({
           image_url: e.target.src,
        });
     });
  });

Example for replacing images with edited ones once user saves.

  var imageEditor = Lollipop.setOptions({
     path: "..",
     appendTo: "body",
     save_icon: true,
     onSave: function (data) {
        Lollipop.image.src = data;
     }
  });
  $("img").each(function() {
     $(this).css("cursor", "pointer");
     $(this).on("click", function(e) {
        imageEditor.open({
           image_url: e.target.src
        }, e.target);
     });
  });

Example for saving modified image server-side with PHP.

  var imageEditor = Lollipop.setOptions({
     upload_icon: true,
     onSave: function(data) {
        $.ajax({
           type: 'POST',
           url: '/saveImage.php',
           data: { imgData: data },
        }).success(function(response) {
           alert('image saved successfully!');
        });
     }
  });

PHP Code

  <?php
       $baseFromJavascript = $_POST['data'];
       $base_to_php = substr($baseFromJavascript, 23);
       $data = base64_decode($base_to_php);
       file_put_contents('image.jpg',$data);
       //Lawson71303 contribution
   ?>

Name	Default	Description
path	"."	Path to or the name of lollipop folder on your server.
image_url	""	Url of image to load into editor. Can be relative or absolute.
appendTo	"body"	What element lollipop container should be appended to in the DOM. Should be a string that is acceptable by document.querySelector()
gallery_icon	false	Show/Hide gallery icon (import images from client gallery).
camera_icon	false	Show/Hide camera icon (take a photo from client webcam).
upload_icon	false	Show/Hide upload icon (execute .save(data) method).
enabledCORS	false	Whether or not lollipop should assume that image is cross-domain enabled. With set to false lollipop will execute getFinalImage(url) method to fetch image trough domains which will be slower (unless the image is hosted on the same domain as lollipop).

Name	Description
.getParams()	Get current lollipop parameters.
.setOptions(options)	Set options. Can do it via open(options) as will, but it will open the editor.
.open(options)	Open image editor. Can pass in all options described above.
.close()	Close the editor.
.save(data)	Will trigger onSave callback...

Import image from gallery (drag and drop support) or take it from webcam, also you can launch the editor with any image you want by changing “src” parameter (url of image to load into editor, can be relative to init.js or absolute). Example: http://127.0.0.1:38613/index.html?src=*

Note: you might need to host lollipop on a server to avoid some strict browser restrictions around file:// protocol. Any server will do, there are no requirements for it.