Javascript 如何在我的编辑器中获得带有灰色/深褐色的裁剪图像。？

您好，我正在创建一个图像编辑器，其中单选按钮检查它将图像颜色更改为灰色和深褐色。。我想在这种颜色上裁剪图像（灰色/深褐色）

当我点击Gray时，当我点击Get Cropped Canvas时，它会返回那个彩色图像

下面是我的代码。一些css和js文件不包括在内。你可以在这里看到真实的例子

请让我知道如何在选中单选按钮的颜色上获得裁剪图像检查此图像

$（函数（）{
"严格使用",；
var console=window.console | |{log:function（）{}；
变量$body=$（'body'）；
$（'[data toggle=“tooltip”]'）。tooltip（）；
$.fn.tooltip.noConflict（）；
$body.tooltip（）；
//演示
// -------------------------------------------------------------------------
（功能（）{
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”）；
变量选项={
专题：16/9，
预览：'.img预览'，
作物：功能（e）{
$dataX.val（数学圆整（e.x））；
$dataY.val（数学圆整（e.y））；
$dataHeight.val（数学圆整（e.height））；
$dataWidth.val（数学圆整（e.width））；
$dataRotate.val（e.rotate）；
$dataScaleX.val（e.scaleX）；
$dataScaleY.val（e.scaleY）；
}
};
$image.on({
“build.crapper”：函数（e）{
console.log（e.type）；
},
“Build.cropper”：函数（e）{
console.log（e.type）；
},
“cropstart.cropper”：函数（e）{
console.log（e.type，e.action）；
},
“cropmove.cropper”：函数（e）{
console.log（e.type，e.action）；
},
“cropend.cropper”：函数（e）{
console.log（e.type，e.action）；
},
“裁剪器”：函数（e）{
console.log（e.type、e.x、e.y、e.width、e.height、e.rotate、e.scaleX、e.scaleY）；
},
“zoom.cropper”：函数（e）{
console.log（e.type，e.ratio）；
}
}).cropper（选项）；
//方法
$body.on（'单击'，'[data method]'，函数（）{
var data=$（this.data（）；
var$目标；
var结果；
if（！$image.data（'crapper'））{
返回；
}
if（data.method）{
data=$.extend（{}，data）；//克隆一个新的
if（type of data.target！=“未定义”）{
$target=$（data.target）；
if（typeof data.option==‘未定义’）{
试一试{
data.option=JSON.parse（$target.val（））；
}捕获（e）{
控制台日志（e.message）；
}
}
}
结果=$image.crapper（data.method、data.option、data.secondOption）；
如果（data.flip==“水平”）{
$（this.data（'option'，-data.option）；
}
如果（data.flip==='vertical'）{
$（this.data（'secondOption'，-data.secondOption）；
}
如果（data.method=='getCroppedCanvas'）{
$（'#getCroppedCanvasModal'）.modal（）.find（'.modal body'）.html（结果）；
如果（$.isPlainObject（result）&&$target）{
试一试{
$target.val（JSON.stringify（result））；
}捕获（e）{
控制台日志（e.message）；
}
}
}
}).on（'keydown'，功能（e）{
if（！$image.data（'crapper'））{
返回；
}
开关（e.which）{
案例37：
e、 预防默认值（）；
$image.crapper（'move'，-1,0）；
打破
案例38：
e、 预防默认值（）；
$image.crapper（'move'，0，-1）；
打破
案例39：
e、 预防默认值（）；
$image.crapper（'move'，1,0）；
打破
案例40：
e、 预防默认值（）；
$image.crapper（'move'，0，1）；
打破
}
});
//导入图像
var$inputImage=$（“#inputImage”）；
var URL=window.URL | | window.webkitURL；
布劳布尔变种；
如果（URL）{
$inputImage.change（函数（）{
var files=this.files；
var文件；
if（！$image.data（'crapper'））{
返回；
}
if（files&&files.length）{
file=文件[0]；
if（/^image\/\w+$/.test（file.type））{
blobURL=URL.createObjectURL（文件）；
$image.one（'build.crapper'，函数（）{
revokeObjectURL（blobURL）；//加载完成时撤销
}).croper（'reset'）。croper（'replace'，blobURL）；
$inputImage.val（“”）；
}否则{
$body.tooltip（'请选择图像文件'，'警告'）；
}
}
});
}否则{
$inputImage.parent（）.remove（）；
}
//选择权
$（'.docs选项：复选框'）。在（'change'，函数（）上{
var$this=$（this）；
变种cropBoxData；
var数据；
if（！$image.data（'crapper'））{
返回；
}
选项[$this.val（）]=$this.prop（'checked'）；
cropBoxData=$image.cropper（'getCropBoxData'）；
canvasData=$image.crapper（'getCanvasData'）；
options.build=函数（）{
$image.croper（'setCropBoxData'，cropBoxData）；
$image.crapper（'setCanvasData'，canvasData'）；
};
$image.crapper（'destroy'）.crapper（选项）；
});
}());
});
$（'input[name=“color”]”）。在（'change'，函数（）{
$（'div.imageDiv'）
.removeClass（'原始深褐色'）
.addClass（$（this.val（））；
$（'div.img-preview'）
.removeClass（'原始深褐色'）
.addClass（$（this.val（））；
})；

@介质（最大宽度：400px）{
.btn组作物{
右边距：-15px！重要；
}
.btn组裁剪>.btn{
左侧填充：5px；
右侧填充：5px；
}
.btn组裁剪.docs工具提示{
玛格
var colorClass = $("input:radio[name=color]:checked").val();
$('#getCroppedCanvasModal').modal().find('.modal-body').
removeClass('original sepia gray').addClass(colorClass).html(result);