[英]Using CamanJS to filter canvas
This is my HTML elements 这是我的HTML元素
<div class="wrapper">
<nav class="navbar navbar-transparent">
<div class="container-fluid">
<div class="navbar-header">
<span class="btn btn-white btn-file">
<i class="material-icons">file_upload</i> Upload your file
<input type="file" id="upload-image">
</span>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div id="image-display" class="col-md-6 col-md-offset-2">
<canvas id="edit-canvas" width="400">
</div>
<div id="toolbox" class="col-md-2">
<div class="color-slider">
<strong>Brightness</strong>
<div id="brightnessSlider" class="slider slider-info">
</div>
<span id="brightness"></span>
</div>
<div class="color-slider">
<strong>Saturation</strong>
<div id="saturateSlider" class="slider slider-info">
</div>
<span id="saturate"></span>
</div>
</div>
</div>
</div>
</div>
I include CamanJS in order to manipulate canvas filtration effects. 我包括CamanJS以便操纵画布过滤效果。 This is my JavaScript code to upload an image to canvas, resize and filter it
这是我的JavaScript代码,用于将图像上传到画布,调整大小和过滤
// Upload, resize image, draw canvas
function fileOnload(e) {
var img=new Image;
var canvas=document.getElementById('edit-canvas');
var context=canvas.getContext('2d');
img.onload=function(){
canvas.height=canvas.width * img.height / img.width;
var oc = document.createElement('canvas'), octx = oc.getContext('2d');
oc.width = img.width;
oc.height = img.height;
octx.drawImage(img, 0, 0);
while (oc.width * 0.5 > canvas.width) {
oc.width *= 0.5;
oc.height *= 0.5;
octx.drawImage(oc, 0, 0, oc.width, oc.height);
}
oc.width = canvas.width;
oc.height = oc.width * img.height / img.width;
context.drawImage(img, 0, 0, oc.width, oc.height);
};
img.src=e.target.result;
Caman('#edit-canvas',function(){
this.render();
});
};
$('#upload-image').change(function(e){
var file = e.target.files[0];
var imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
// Brightness slider
var brightnessSlider=document.getElementById('brightnessSlider');
noUiSlider.create(brightnessSlider,{
start: 0,
step: 1,
connect: 'lower',
range: {
min: -100,
max: 100
},
format: wNumb({
decimals: 0
})
});
brightnessSlider.noUiSlider.on('update',function(values,handle){
$('#brightness').html(values[handle]);
Caman('#edit-canvas',function(){
this.brightness(values[handle]).render();
});
});
When I slide, I try logging in the console, the value does change, but the canvas does not take any effects. 滑动时,我尝试登录控制台,该值确实会更改,但是画布不会产生任何影响。 Actually, a part of the canvas even disappears.
实际上,画布的一部分甚至消失了。 I don't know why.
我不知道为什么 Did I do anything wrong from guide of CamanJS?
我在CamanJS指南中做错了什么吗?
I already found my problem. 我已经发现我的问题了。 It was because of my poor asynchronous handling.
这是由于我不良的异步处理。 It should be like this:
应该是这样的:
var brightnessSlider=document.getElementById('brightnessSlider');
noUiSlider.create(brightnessSlider,{
start: 0,
step: 1,
connect: 'lower',
range: {
min: -100,
max: 100
},
format: wNumb({
decimals: 0
})
});
(function(){
// Upload, resize image, draw canvas
function fileOnload(e) {
var img=new Image;
img.src=e.target.result;
var canvas=document.getElementById('edit-canvas');
var context=canvas.getContext('2d');
img.onload=function(){
canvas.height=canvas.width * img.height / img.width;
var oc = document.createElement('canvas'), octx = oc.getContext('2d');
oc.width = img.width;
oc.height = img.height;
octx.drawImage(img, 0, 0);
while (oc.width * 0.5 > canvas.width) {
oc.width *= 0.5;
oc.height *= 0.5;
octx.drawImage(oc, 0, 0, oc.width, oc.height);
}
oc.width = canvas.width;
oc.height = oc.width * img.height / img.width;
context.drawImage(img, 0, 0, oc.width, oc.height);
Caman('#edit-canvas',function(){
this.render();
});
brightnessSlider.noUiSlider.on('change',function(values,handle){
$('#brightness').html(values[handle]);
Caman('#edit-canvas',function(){
this.revert(false);
this.brightness(values[handle]).render();
});
});
};
};
$('#upload-image').change(function(e){
var file = e.target.files[0];
var imageType = /image.*/;
if (!file.type.match(imageType))
return;
var reader = new FileReader();
reader.onload = fileOnload;
reader.readAsDataURL(file);
});
})();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.