如何在编辑器中使用灰色/棕褐色裁剪图像？ [英] How to get cropped image with gray/ sepia in my editor.?
本文介绍了如何在编辑器中使用灰色/棕褐色裁剪图像？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
你好，我正在创建一个图像编辑器，其中单选按钮检查它将图像颜色更改为灰色和棕褐色..我想裁剪该图像的颜色（灰色/棕褐色）
当我点击灰色时，它应该返回那个彩色图像，当我点击获取裁剪的画布。
以下是我的代码。一些CSS和JS文件不包括在内。你可以在这里看到活的例子点击这里演示
请让我知道如何以选定单选按钮的颜色获得裁剪后的图像检查此图像 http://i.stack.imgur.com/TkwHm.jpg
class =snippet-code>
$（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 $ DA taWidth = $（'＃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（e.x））; $ dataY.val（Math.round（e.y））; $ 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（选项）; //方法$ 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）; //克隆一个新的if（typeof data.target！=='undefined'）{$目标= $（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（'选项'，-data.option）;} if（data.flip ==='vertical'）{$（this）.data（'secondOption'，-data.secondOption）;} if（data.method ===' getCroppedCanvas'）{$（'＃getCroppedCanvasModal'）。modal（）。find（ .modal体）的HTML。（结果）;如果（$ .isPlainObject（结果）及;&安培; $ target）{try {$ target.val（JSON.stringify（result））; } catch（e）{console.log（e.message）; （'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;}}）; //导入图像var $ inputImage = $（'＃inputImage'）; var URL = window.URL || window.webkitURL; var blobURL;如果（URL）{$ inputImage.change（function（）{var files = this.files; var file; if（！$ image.data（'cropper'））{return;} if（files&&如果（/^image\/\w+$/.test(file.type））{blobURL = URL.createObjectURL（file）; $ image.one（'built.cropper '，function（）{URL.revokeObjectURL（blobURL）; //当加载完成时撤消}）。cropper（'reset'）。cropper（'replace'，blobURL）; $ inputImage.val（''）;} else { $ body.tooltip（'请选择一个图片文件'，'warning'）;}}}）; } else {$ inputImage.parent（）。remove（）; （）; //选项$（'。docs-options：checkbox'）。on（'change'，function（）{var $ this = $（this）; var cropBoxData; var canvasData; if（！$ image.data（' （'checked'）; cropBoxData = $ image.cropper（'getCropBoxData'）; canvasData = $ image.cropper（'getCanvasData'）{返回;}选项[$ this.val（）] = $ this.prop ）; 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 grey'）.addClass（$（this）.val （））; $（'div.img-preview'）.removeClass（'original sepia grey'）.addClass（$（this）.val（））;}）;
@media（max-width：400px）{.btn-group-crop {margin-right：-15px ！重要; } .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）;过滤器：棕褐色（1）; } .gray {-webkit-filter：grayscale（1）;过滤器：灰度（1）; }
< link rel =stylesheethref = ../assets/css/font-awesome.min.css\"> < link rel =stylesheethref =../ assets / css / bootstrap.min.css> < link rel =stylesheethref =../ assets / css / tooltip.min.css> < link rel =stylesheethref =../ dist / cropper.css> < link rel =stylesheethref =css / main.css>< div class =btn-group> < button type =buttonclass =btn btn-primarytitle =Color> < input type =radiochecked =checkedvalue =originalname =color/> Color< / button> < button type =buttonclass =btn btn-primarytitle =Grey> < input type =radiovalue =grayname =color/> Gray< / button> < button type =buttonclass =btn btn-primarytitle =Sepia> < input type =radiovalue =sepianame =color/>棕褐< /按钮> < / DIV> < div class =btn-group btn-group-crop> < button type =buttonclass =btn btn-primarydata-method =getCroppedCanvas> < span class =docs-tooltipdata-toggle =tooltiptitle =$（）。cropper（& quot; getCroppedCanvas& quot;）>获得裁剪帆布< / span> < /按钮> < button type =buttonclass =btn btn-primarydata-method =getCroppedCanvasdata-option ={& quot; width& quot ;: 160，& quot; height& quot ;:90 }> < span class =docs-tooltipdata-toggle =tooltiptitle =$（）。cropper（& quot; getCroppedCanvas& quot ;,; width：160，height：90}）> 160& times; 90< / span> < /按钮> < button type =buttonclass =btn btn-primarydata-method =getCroppedCanvasdata-option ={& quot; width& quot ;: 320，& quot; height& quot ;: 180 }> < span class =docs-tooltipdata-toggle =tooltiptitle =$（）。cropper（& quot; getCroppedCanvas& quot;，; {width：320，height：180}）> 320& times; 180< / span> < /按钮> < / DIV> <！ - 以模式显示裁剪后的图像 - > < div class =modal fade docs-croppedid =getCroppedCanvasModalaria-hidden =truearia-labelledby =getCroppedCanvasTitlerole =dialogtabindex = - 1> < div class =modal-dialog> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> < h4 class =modal-titleid =getCroppedCanvasTitle>裁剪< / h4> < / DIV> < div class =modal-body>< / div> <！ - < div class =modal-footer> < button type =buttonclass =btn btn-primarydata-dismiss =modal>关闭< / button> < / DIV> - > < / DIV> < / DIV> < / div><！ - /.modal - > <！ - 脚本 - > < script src =../ assets / js / jquery.min.js>< / script> < script src =../ assets / js / tooltip.min.js>< / script> < script src =../ assets / js / bootstrap.min.js>< / script> < script src =../ dist / cropper.js>< / script> < / script>< / script>< / body>< / html>< / code>< / pre> > 解决方案尝试将css类应用于 modal-body 类内 $ body.on（'click'，'[data-method]'，function（）{：
<$ p （）; $（$＃$>'code $> var colorClass = $（input：radio [name = color]：checked）。val（）;
$（'＃getCroppedCanvasModal'）。modal '.modal-body'）。
removeClass（'original sepia grey'）.addClass（colorClass）.html（result）;
Hi I am creating a image editor where on radio button check it changes image color into gray and sepia .. and I want to cropped image on that color(gray/sepia)
When I click on Gray it should return that color image when i click on Get Cropped Canvas.
Below is the my code. Some css and js file are not included. you can see live example here Click here for demo
Please let me know how can I get cropped image on that color which radio button is selected Check this image http://i.stack.imgur.com/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(e.x));
$dataY.val(Math.round(e.y));
$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, e.x, e.y, 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);
}
<link rel="stylesheet" href="../assets/css/font-awesome.min.css">
<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/tooltip.min.css">
<link rel="stylesheet" href="../dist/cropper.css">
<link rel="stylesheet" href="css/main.css">
<div class="btn-group">
<button type="button" class="btn btn-primary" title="Color"> <input type="radio" checked="checked" value="original" name="color" />Color</button>
<button type="button" class="btn btn-primary" title="Gray"> <input type="radio" value="gray" name="color" />Gray</button>
<button type="button" class="btn btn-primary" title="Sepia"> <input type="radio" value="sepia" name="color" />Sepia</button>
</div>
<div class="btn-group btn-group-crop">
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas")">
Get Cropped Canvas
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 160, height: 90 })">
160×90
</span>
</button>
<button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 320, height: 180 })">
320×180
</span>
</button>
</div>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4>
</div>
<div class="modal-body"></div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div><!-- /.modal -->
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/tooltip.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../dist/cropper.js"></script>
<script src="js/main.js"></script>
</body>
</html>
解决方案 Try to apply css class to modal-body class inside $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);
这篇关于如何在编辑器中使用灰色/棕褐色裁剪图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
