Cómo obtener una imagen recortada con gris / sepia en mi editor.

Hola, estoy creando un editor de imágenes donde, con el botón de opción, compruebo que cambia el color de la imagen a gris y sepia … y quiero recortar la imagen en ese color (gris / sepia)

Cuando hago clic en gris, debería devolver esa imagen en color cuando hago clic en Obtener canvas recortado.

A continuación está el código de mi. Algunos archivos css y js no están incluidos. puedes ver el ejemplo en vivo aquí Haz clic aquí para ver la demostración

Por favor, hágamelo saber cómo puedo obtener una imagen recortada en ese color, que botón de radio está seleccionado Ver esta imagen http://sofes.miximages.com/javascript/TkwHm.jpg

$(function () { 'use strict'; var console = window.console || { log: function () {} }; var $body = $('body'); $('[data-toggle="tooltip"]').tooltip(); $.fn.tooltip.noConflict(); $body.tooltip(); // Demo // ------------------------------------------------------------------------- (function () { var $image = $('.img-container > img'); var $dataX = $('#dataX'); var $dataY = $('#dataY'); var $dataHeight = $('#dataHeight'); var $dataWidth = $('#dataWidth'); var $dataRotate = $('#dataRotate'); var $dataScaleX = $('#dataScaleX'); var $dataScaleY = $('#dataScaleY'); var options = { aspectRatio: 16 / 9, preview: '.img-preview', crop: function (e) { $dataX.val(Math.round(ex)); $dataY.val(Math.round(ey)); $dataHeight.val(Math.round(e.height)); $dataWidth.val(Math.round(e.width)); $dataRotate.val(e.rotate); $dataScaleX.val(e.scaleX); $dataScaleY.val(e.scaleY); } }; $image.on({ 'build.cropper': function (e) { console.log(e.type); }, 'built.cropper': function (e) { console.log(e.type); }, 'cropstart.cropper': function (e) { console.log(e.type, e.action); }, 'cropmove.cropper': function (e) { console.log(e.type, e.action); }, 'cropend.cropper': function (e) { console.log(e.type, e.action); }, 'crop.cropper': function (e) { console.log(e.type, ex, ey, e.width, e.height, e.rotate, e.scaleX, e.scaleY); }, 'zoom.cropper': function (e) { console.log(e.type, e.ratio); } }).cropper(options); // Methods $body.on('click', '[data-method]', function () { var data = $(this).data(); var $target; var result; if (!$image.data('cropper')) { return; } if (data.method) { data = $.extend({}, data); // Clone a new one if (typeof data.target !== 'undefined') { $target = $(data.target); if (typeof data.option === 'undefined') { try { data.option = JSON.parse($target.val()); } catch (e) { console.log(e.message); } } } result = $image.cropper(data.method, data.option, data.secondOption); if (data.flip === 'horizontal') { $(this).data('option', -data.option); } if (data.flip === 'vertical') { $(this).data('secondOption', -data.secondOption); } if (data.method === 'getCroppedCanvas') { $('#getCroppedCanvasModal').modal().find('.modal-body').html(result); if ($.isPlainObject(result) && $target) { try { $target.val(JSON.stringify(result)); } catch (e) { console.log(e.message); } } } }).on('keydown', function (e) { if (!$image.data('cropper')) { return; } switch (e.which) { case 37: e.preventDefault(); $image.cropper('move', -1, 0); break; case 38: e.preventDefault(); $image.cropper('move', 0, -1); break; case 39: e.preventDefault(); $image.cropper('move', 1, 0); break; case 40: e.preventDefault(); $image.cropper('move', 0, 1); break; } }); // Import image var $inputImage = $('#inputImage'); var URL = window.URL || window.webkitURL; var blobURL; if (URL) { $inputImage.change(function () { var files = this.files; var file; if (!$image.data('cropper')) { return; } if (files && files.length) { file = files[0]; if (/^image\/\w+$/.test(file.type)) { blobURL = URL.createObjectURL(file); $image.one('built.cropper', function () { URL.revokeObjectURL(blobURL); // Revoke when load complete }).cropper('reset').cropper('replace', blobURL); $inputImage.val(''); } else { $body.tooltip('Please choose an image file.', 'warning'); } } }); } else { $inputImage.parent().remove(); } // Options $('.docs-options :checkbox').on('change', function () { var $this = $(this); var cropBoxData; var canvasData; if (!$image.data('cropper')) { return; } options[$this.val()] = $this.prop('checked'); cropBoxData = $image.cropper('getCropBoxData'); canvasData = $image.cropper('getCanvasData'); options.built = function () { $image.cropper('setCropBoxData', cropBoxData); $image.cropper('setCanvasData', canvasData); }; $image.cropper('destroy').cropper(options); }); }()); }); $('input[name="color"]').on('change', function () { $('div.imageDiv') .removeClass('original sepia gray') .addClass($(this).val()); $('div.img-preview') .removeClass('original sepia gray') .addClass($(this).val()); }); 
 @media (max-width: 400px) { .btn-group-crop { margin-right: -15px!important; } .btn-group-crop > .btn { padding-left: 5px; padding-right: 5px; } .btn-group-crop .docs-tooltip { margin-left: -5px; margin-right: -5px; padding-left: 5px; padding-right: 5px; } } .original { } .sepia { -webkit-filter: sepia(1); filter: sepia(1); } .gray { -webkit-filter: grayscale(1); filter: grayscale(1); } 
      

Intenta aplicar la clase css a la clase modal-body dentro de $body.on('click', '[data-method]', function () { :

 var colorClass = $("input:radio[name=color]:checked").val(); $('#getCroppedCanvasModal').modal().find('.modal-body'). removeClass('original sepia gray').addClass(colorClass).html(result);