JSFiddle - React, Tailwind, and code Playground

by Csaba Hellinger

HTML

<script src="https://rawgit.com/MatthewRuddy/jQuery-filter.me/master/jquery.filterme.js"></script>
<form id="form1" runat="server">
    <input type="text" name="title" id="title" placeholder="title" formenctype="multipart/form-data" /><br /><br />

    <input type='file' id="imgInp" /><br /><br />

    <select name="filter" id="filter"><br /><br />
        <option value="Original">Original</option>
        <option value="1977">1977</option>
        <option value="Brannan">Brannan</option>
        <option value="Gotham">Gotham</option>
        <option value="Hefe">Hefe</option>
        <option value="Inkwell">Inkwell</option>
        <option value="Kelvin">Lord Kelvin</option>
        <option value="Nashville">Nashville</option>
        <option value="PRO">X-PRO II</option>
    </select><br /><br />
    <img id="blah" src="#" alt="your image" class="filter"/>
    <img id="preview" src="#" alt="your image" class="filter"/>
</form>

JavaScript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            // apply the currently selected filter to the new image
            jQuery('#blah').attr('src', e.target.result).filterMe();
            jQuery('#preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

jQuery("#imgInp").change(function(){
    readURL(this);
});

jQuery("#filter").change(function() {
    var filterName = jQuery('#filter').find(":selected").text();
    var src = jQuery('#preview').attr('src');       

    jQuery("#blah")
        .removeData()  // when you restore the original image, you need to remove the stored data object too.
        .attr({ "src": src, "data-filter": filterName })
        .filterMe();
});