Open jywarren opened 5 years ago
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.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).
ah oops... ActiveRecord::ValueTooLong (Mysql2::Error: Data too long for column 'remote_url' at row 1: INSERT INTO
images(
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....
OK, so this would depend on this working: https://github.com/publiclab/plots2/pull/3619
@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/
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);
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:
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:
But I tried this and got a CORS error:
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?