eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-12 19:30:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Support External Images via Canvas

Browse Source
This commit is contained in:
Chinmay Pandhare
2017-07-26 23:16:32 +05:30
parent 21334ff5d8
commit d90c61f85d
7 changed files with 84 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
dist/image-sequencer.js vendored
View File

@@ -34717,8 +34717,7 @@ ImageSequencer = function ImageSequencer(options) {
for (var i in json_q.images)
require('./LoadImage')(this,i,json_q.images[i])
json_q.callback();
return {
var ret = {
name: "ImageSequencer Wrapper",
sequencer: this,
addSteps: this.addSteps,
@@ -34729,6 +34728,8 @@ ImageSequencer = function ImageSequencer(options) {
setUI: this.setUI,
images: loadedimages
};
json_q.callback.call(ret);
return ret;
}
function replaceImage(selector,steps,options) {
@@ -34799,14 +34800,38 @@ module.exports = InsertStep;
},{}],115:[function(require,module,exports){
function LoadImage(ref, name, src) {
function CImage(src) {
var datauri = (ref.options.inBrowser || src.substring(0,11) == "data:image/")?(src):require('urify')(src);
function makeImage(datauri) {
var image = {
src: datauri,
format: datauri.split(':')[1].split(';')[0].split('/')[1]
}
return image;
}
function CImage(src, callback) {
var datauri;
if (src.substring(0,11) == "data:image/") {
datauri = src;
callback(datauri);
}
else if (ref.options.inBrowser) {
var ext = src.split('.').pop();
var image = document.createElement('img');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
image.onload = function() {
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
context.drawImage(image,0,0);
datauri = canvas.toDataURL(ext);
callback(datauri);
}
image.src = src;
}
else {
datauri = require('urify')(src);
callback(datauri);
}
}
function loadImage(name, src) {
var image = {
@@ -34834,13 +34859,17 @@ function LoadImage(ref, name, src) {
}
return false;
},
output: CImage(src)
}]
};
ref.images[name] = image;
ref.images[name].steps[0].UI.onSetup();
ref.images[name].steps[0].UI.onDraw();
ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
CImage(src, function(datauri) {
var output = makeImage(datauri);
image.steps[0].output = output;
ref.images[name] = image;
ref.images[name].steps[0].UI.onSetup();
ref.images[name].steps[0].UI.onDraw();
ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
return true;
});
}
return loadImage(name,src);

BIN
examples/red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 277 B

5
src/ImageSequencer.js
View File

@@ -142,8 +142,7 @@ ImageSequencer = function ImageSequencer(options) {
for (var i in json_q.images)
require('./LoadImage')(this,i,json_q.images[i])
json_q.callback();
return {
var ret = {
name: "ImageSequencer Wrapper",
sequencer: this,
addSteps: this.addSteps,
@@ -154,6 +153,8 @@ ImageSequencer = function ImageSequencer(options) {
setUI: this.setUI,
images: loadedimages
};
json_q.callback.call(ret);
return ret;
}
function replaceImage(selector,steps,options) {

42
src/LoadImage.js
View File

@@ -1,12 +1,36 @@
function LoadImage(ref, name, src) {
function CImage(src) {
var datauri = (ref.options.inBrowser || src.substring(0,11) == "data:image/")?(src):require('urify')(src);
function makeImage(datauri) {
var image = {
src: datauri,
format: datauri.split(':')[1].split(';')[0].split('/')[1]
}
return image;
}
function CImage(src, callback) {
var datauri;
if (src.substring(0,11) == "data:image/") {
datauri = src;
callback(datauri);
}
else if (ref.options.inBrowser) {
var ext = src.split('.').pop();
var image = document.createElement('img');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
image.onload = function() {
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
context.drawImage(image,0,0);
datauri = canvas.toDataURL(ext);
callback(datauri);
}
image.src = src;
}
else {
datauri = require('urify')(src);
callback(datauri);
}
}
function loadImage(name, src) {
var image = {
@@ -34,13 +58,17 @@ function LoadImage(ref, name, src) {
}
return false;
},
output: CImage(src)
}]
};
ref.images[name] = image;
ref.images[name].steps[0].UI.onSetup();
ref.images[name].steps[0].UI.onDraw();
ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
CImage(src, function(datauri) {
var output = makeImage(datauri);
image.steps[0].output = output;
ref.images[name] = image;
ref.images[name].steps[0].UI.onSetup();
ref.images[name].steps[0].UI.onDraw();
ref.images[name].steps[0].UI.onComplete(image.steps[0].output.src);
return true;
});
}
return loadImage(name,src);

2
src/modules/_nomodule/PixelManipulation.js
View File

@@ -43,7 +43,7 @@ module.exports = function PixelManipulation(image, options) {
// but node modules and their documentation are essentially arcane on this point
var chunks = [];
var totalLength = 0;
var r = savePixels(pixels, options.format);
var r = savePixels(pixels, options.format, {quality: 100});
r.on('data', function(chunk){
totalLength += chunk.length;

5
test.js
View File

@@ -1,5 +0,0 @@
require('./src/ImageSequencer');
sequencer = ImageSequencer();
sequencer.loadImages({images:{red:'examples/red.jpg'},callback:function(){
sequencer.addSteps(['do-nothing','invert']).run();
}});

9
test/image-manip.js
View File

@@ -8,11 +8,16 @@ var test = require('tape');
require('../src/ImageSequencer.js');
var sequencer = ImageSequencer({ ui: false });
var image = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAQABADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAABgj/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABykX//Z";
var image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEX+AAD///+KQee0AAAAAWJLR0QB/wIt3gAAAAd0SU1FB+EGHRIVAvrm6EMAAAAMSURBVAjXY2AgDQAAADAAAceqhY4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDYtMjlUMTg6MjE6MDIrMDI6MDDGD83DAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTA2LTI5VDE4OjIxOjAyKzAyOjAwt1J1fwAAAABJRU5ErkJggg==";
sequencer.loadImages(image);
sequencer.addSteps(['do-nothing-pix','invert','invert']);
sequencer.run();
test("Preload", function(t) {
sequencer.run(function(){
t.end();
});
});
test("Inverted image isn't identical", function (t) {
t.notEqual(sequencer.images.image1.steps[1].output.src, sequencer.images.image1.steps[2].output.src);