JavaScript widget that initiates a mini Sequencer interface from any image on a page

[jywarren]

I've been thinking of how to integrate IS into sites like PublicLab.org, so that people who upload images can use these powerful image processing tools on photos and images they upload to that site. Think of, for example, people uploading microscope images, or aerial photos.

What if we could put in a JavaScript snippet that inserted an IS icon in the lower right corner of uploaded images, which, when you clicked it, opened... i dunno, a modal with Sequencer in it? Or directed to a page, but had a "callback function" defined to send the sequencer output back to the original page to do something?

The insertable script could be like:

<script src="https://publiclab.github.io/image-sequencer/embed/"></script>

And you could initiate it with:

<script>
  var csrf_token = $('meta[name="csrf-token"]').attr('content');
  new ImageSequencer.Widget('#divId', function callback(outputImage) {
    // post the output as a comment:
    window.open('https://publiclab.org/comment/create/'  + nid 
      + '?authenticity_token=' + csrf_token 
      + '&body=<img src=" + outputImage.src + " />';
  });
</script>

or something. Also note the authenticity_token which we can provide from any PublicLab page to prove that the request is originating from the same site. It won't accept requests otherwise.

Would this work? I think probably many images will be too large to be saving as a dataUrl, sadly. Maybe we need to upload the image separately to PublicLab.org, then embed the returned image address into the comment body.

That'd require another function, to POST to: 'https://publiclab.org/images/create` with something like:

$.post('https://publiclab.org/images/create', {
    authenticity_token: token,  
    i: sequencer.images.image1.steps[1].output.src, 
    uid: 1 
  }, function callback(output) {
    console.log(output);
});

But I tried this and got a CORS error:

Failed to load https://publiclab.org/images/create: Redirect from 'https://publiclab.org/images/create' to 'https://publiclab.org/login' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://publiclab.github.io' is therefore not allowed access.

I think it can't tell that the page at https://publiclab.github.io is logged in, and it's also rejecting a cross-domain origin.

Instead, we could install the new mini /embed/ interface on the PublicLab.org domain by installing it with NPM as part of the parent app. This isn't quite as nice but would bypass the CORS issues and ensure it "knows" you're logged in (based on session, i think).

Then, it'd work the same as above but pointed at https://publiclab.org/sequencer/embed/ (maybe) ...?

I tried this in a JS console and got a 500 error, but I think that means we're not using the image create function right, and I think that means this could essentially work once i figure that out.

@tech4GT what do you think of this? I know it's a big chunk, but pretty interesting way to put IS to work, no?

[gitmate[bot]]

GitMate.io thinks possibly related issues are https://github.com/publiclab/image-sequencer/issues/173 (Building out a contributor community for Image Sequencer), https://github.com/publiclab/image-sequencer/issues/23 (Planning Issue for the Image Sequencer GSoC Project), and https://github.com/publiclab/image-sequencer/issues/148 (Create demo bookmarklet code for inverting images on a page).

[gitmate[bot]]

GitMate.io thinks possibly related issues are https://github.com/publiclab/image-sequencer/issues/173 (Building out a contributor community for Image Sequencer), https://github.com/publiclab/image-sequencer/issues/23 (Planning Issue for the Image Sequencer GSoC Project), and https://github.com/publiclab/image-sequencer/issues/148 (Create demo bookmarklet code for inverting images on a page).

[jywarren]

ah oops... ActiveRecord::ValueTooLong (Mysql2::Error: Data too long for column 'remote_url' at row 1: INSERT INTOimages(uid,crea ted_at,updated_at,remote_url)

OK, so... have to do it differently... um... i think we need to adapt the images_controller to accept data urls... checking....

[jywarren]

OK, so this would depend on this working: https://github.com/publiclab/plots2/pull/3619

[tech4GT]

@jywarren This sounds really cool!! Also I think since we are not doing anything commercial here maybe we can use imgur's api, what say? That way we can upload these images to imgur and use that url.(As far as I remember they support data urls upto 10mb) Have a look at this https://api.imgur.com/endpoints/image/

[jywarren]

Confirmed that this works using the following script, from JavaScript console on any PublicLab.org page:

var token = "r0bzzuKtNIF8HpQmSmTndzNM+a1ndsWm/keBtL9nQZaWav70zqSM1bv+hsNqT9fDmvJZrtMKii2xF2md8MylkQ=="; // CSRF token

var data = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";

$.post('/images/create', { authenticity_token: token,  data: data, uid: 1, photo: { title: '', notes: '' }  }, console.log);