rendro / vintagejs Goto Github PK

I am trying to use vintageJS on my website to allow users to perform some tweaks on a profile picture, part of this process is to allow them to dynamically change the effects applied to the image on the fly. These are just simple tweaks like set brightness to -34 and etc. I am trying to have an alert displayed when vintageJS starts working (to let users know the site is not just sitting there, hung up). However, when I try to show the alert inside of the onStart callback it does not actually show up until after vintageJS has finished executing (i.e. when onEnd gets called). Here is how I have everything set up:

function onVintageStart() {
   console.log('start');
   $('#infoAlert1').offcanvas('show');
}

function onVintageFinish() {
    console.log('finish');
}
...
$('#crop-source').vintage({
    onStart: onVintageStart,
    onStop: onVintageFinish
});
vintageAPI = $('#crop-source').data('vintageJS');

What is happening is that I see "start" printed in the log but my alert does not appear until after I see finish printed in the log. I am using Jasny's OffCanvas plugin to show/hide the alert but I have tested it with just a simple standard jQuery call like $('.navbar-brand').text('VintageJS Rocks~!' ); (and it was not updated until after onEnd was called). Do you have any ideas as to what would be causing this? Any help would be appreciated, thanks!

I want to apply this on canvas that I already have prepared. How?

I have noticed that VintageJS dont works well on big file sizes. Is there any solution? WebGL?

Hi. i am using Jquery version of vintageJS on my personal website. i want to have a drop down like this page. http://rendro.github.io/vintageJS/
I have difficulty of resetting the image to the origin. i have tried $('#myImage').reset(); but it doesn't work.
Does any one have any suggestion?
Thanks!

FYI I published this package to NPM under the name vintagejs. Let me know if anyone here wants owner privs to maintain versions.

I import images url's from panoramio api then i want to apply vintageJS

and get this error:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.

Hey guys, I'm using the vintageJS API like: vjsAPI = $(#image-id).data('vintageJS'); and I want to return the list of effects applied to the image. I return the '_effect' variable but I got all values equal to false. Any ideas?
Thanks.

Hi,

You're using optimizations technics that just obfuscate the code for no benefit (like the --i or i<<=1 instead of i++, i*= 2), and at the same time, you're missing obvious optimization where the code is spending most of the time:

     // curves
      if (!!_effect.curves) {
        _imageData[idx  ] = _effect.curves.r[ _imageData[idx  ] ];
        _imageData[idx+1] = _effect.curves.g[ _imageData[idx+1] ];
        _imageData[idx+2] = _effect.curves.b[ _imageData[idx+2] ];
      }

      // contrast
      if (!!_effect.contrast) {
        _imageData[idx  ] = contrastFactor * (_imageData[idx  ] - 128) + 128;
        _imageData[idx+1] = contrastFactor * (_imageData[idx+1] - 128) + 128;
        _imageData[idx+2] = contrastFactor * (_imageData[idx+2] - 128) + 128;
      }

      // brightness
      if (!!_effect.brightness) {
        _imageData[idx  ] += _effect.brightness;
        _imageData[idx+1] += _effect.brightness;
        _imageData[idx+2] += _effect.brightness;
      }

      // screen
      if (!!_effect.screen) {
        _imageData[idx  ] = 255 - ((255 - _imageData[idx  ]) * (255 - _effect.screen.r * _effect.screen.a) / 255);
        _imageData[idx+1] = 255 - ((255 - _imageData[idx+1]) * (255 - _effect.screen.g * _effect.screen.a) / 255);
        _imageData[idx+2] = 255 - ((255 - _imageData[idx+2]) * (255 - _effect.screen.b * _effect.screen.a) / 255);
      }

All of these only depends on the pixel value, not its position or its neighbors. So, help yourself and create a LUT containing all theses operations, and only apply this once, like this:

   // Do this once, out of the pixel loop.
   LUT_red = [] ... for gb
   for (var i = 0; i < 255; i++)
   {
      LUT_red[i] = 255-((255 - (contrastFactor * (_effect.curves.r[i] - 128) + 128) + _effect.brightness))*(255 - _effect.screen.r * _effect.screen.a) / 255);
      // Ditto for other colors
  }


  // Then, in the pixel loop, only do this:
  for (...pixel_loop) { 
  _imageData[idx] = LUT_red[_imageData[idx]];

BTW, you don't need to test if the effect is enabled PER pixel, just provide a identity default (like a contrast of 1.0, a brightness of 0, a curves with identity (f(x) = x) and a negative screen.

In other words, profile your code, spot where you spend time and only optimize here. There is no point in gaining a µs for a loop test that happens only a few time.

In the package there aren't any examples of using "picture" as a class and not singular ID. Does this work as a CSS class?

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

I saw this issue posted on stackoverflow pertaining to localhost, but I am also getting on my staging server running nginx and unicorn.

anyone know how to resolve?

i am simply including jquery, the vintagejs library and then calling

$("img").vintage()

after all images loaded.

Hi,
I have this code:

64-encoded data URI.

Can I use vintagejs without filename ?
Tnx !!

https://github.com/rendro/vintageJS/blob/master/vintage.presets.js#L34

This file doesn't exist in the repository and prevents the vintage preset from being usable as is.

There is some solution, a tiny or lite version for iphone ?
The iphone stack for some minutes.
Thanks.

Thank you for this amazing plugin!

I wanted to ask if there is a parameter I can add in the configuration object to prevent stacking of effects?
Also, is there a configuration to remove all applied effects.

Thanks in advance

Would like to extend the viewFinder feature ... can you explain how it works and what images I have to take ? Do they require any special effect ?

Thanks a lot!

Is it possible to apply vintageJS to a CSS background image?

Bower still thinks 2.0.0 is the latest version

Can anyone give some codes that show how to use apply() ?

Hey -

there is no opensource library for vintage effects (except for commercial aviary) like this one.

Lets do it?

What are your thoughts on removing jQuery dependency? Are there any lurking hurdles that would need to be taken into account, or is jQuery used for things like selectors and events?

(function() {
    myImage.addEventListener('click', (function () {
        vintage(this, {
            vignette: {
                black: 0.8,
                white: 0.2
            },
            noise: 20,
            screen: {
                red: 12,
                green: 75,
                blue: 153,
                strength: 0.3
            },
            desaturate: 0.05
        });
    });
})();

Hi,
First of all, thank you for this project. I'm having some problem using "reset()" function (and apply changes).
I'm not using jquery, can you provide an example for that ?
Thank you :)

Hi, I love your project! I`m currently using vinatgejs in a phone gap app. but i takes very long (iphone 4 - 10 secs; iphone 6 - 2 secs) Do you know how i could accelerate it?

Thanks

Is any source code of demo effects (from http://rendro.github.io/vintageJS/) available for others to use? Or some other resources I could use to generate few filters (other than the one from example.js?

How can I implement reset filters to switch between multiple filters to a single image?
Thanks in advance!

Hi there,
i am trying to make a image editor using VintageJS like the one found on vintageJS.com, Here it is how i am doing it,
The problem is that the effect is applied correctly but when i try to change the range input type it does not work, below is the javascript code, any help would be appreciated!

$(document).ready(function() {
            //The ranger is the HTML5 input type range
            $('#ranger').change( function() {
                newValue = this.value;
                $('#viewer').html("The current value is " + newValue);
                applyFilter(3);                     
            });
         });

function applyFilter(amount){
    var options = {
            onError: function() {
            alert('ERROR');
             }     
           };

    var effect = {
            vignette: amount,
            sepia: true,
            contrast: -64
            };

        $('img#picture').vintage(options, effect);
    }

Thanks

Hello,

Awesome library.

One thing, when I apply contrast, sepia, or desaturate, the transparent parts of my PNG file are rendered black.

Is this the expected behavior? Is there any way to re-map that black color to transparency or any way to change this behavior?

Thanks,
Jeremy

Please remove

Thanks :)

Hi,
i am trying to change image twice, but when i click on some effect i get the previous image(before i made the changed).
i am using through jquery.

second thing, i have few images that needs to get the effect, but it work only for one image, even if i define it for another variable.

hi, vintageJS is awesome, i would love to use some effects in an MIT licenses project of mine, what's the license of vintageJS?

While implementing with ionic 1 and ionic modal, its giving error like
ReferenceError: VintageJS is not defined

How can i overcome this ?

Love vintageJS, really great work!!

One question. I know you can assign the class 'vintage' to img elements, but is it also possible at the same time, to apply it to other elements also (ie; )?

The reason I ask is that I have a larger image that pops up in a lightbox this is attached to a href, which I would like to add the effect to.

Thanks in advance

Thank you for your work.
I would simply remove the sepia effect when the mouse hovers over the image.

I can not manage to do this manipulation.

Can you help me