我正在开发平均堆栈应用程序。
我卡在了照片编辑器中。
我使用“Camanjs”对照片产生影响并在 angularjs 1 中对其进行编辑。
它与 slider 的第一张图像配合使用效果很好，但如果我在编辑第一张图像后选择任何其他图像形式的 slider ，则它会显示旧图像。
my file (directive in angularjs)
.directive('hzPhotoEditor', ['$timeout', function($timeout) {
return {
restrict: "E",
link: function(scope, elem, attrs) {
var imgCanvas, $save;
//init photo when click on real photo
scope.$on("fillCanvas", function(event, data) {
console.log("fill canvas called");
console.log(data.photo);
scope.fillCanvas(data);
});
scope.fillCanvas = function(data) {
var hzMIW = 0,
hzMIH = 0,
hzImgH = 0,
hzImgW = 0,
path = '',
c, c1, ctx, ctx1;
angular.element(".hz-photo-editor-wrapper").attr("style", angular.element(".hz-modal-wrapper").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-left").attr("style", angular.element(".hz-modal-wrapper .hz-left").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-modal-image-wrapper").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image-wrapper").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-modal-image").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("height", angular.element(".hz-modal-slider-image").height());
angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("width", angular.element(".hz-modal-slider-image").width());
hzMIW = angular.element(".hz-modal-wrapper .hz-modal-image").css("width").replace("px", "");
hzMIH = angular.element(".hz-modal-wrapper .hz-modal-image").css("height").replace("px", "");
hzImgH = angular.element(".hz-modal-wrapper .hz-modal-image img").css('height').replace("px", "");
hzImgW = angular.element(".hz-modal-wrapper .hz-modal-image img").css('width').replace("px", "");
path = '/media/site/photo/' + data.photo.photo_name;
c = document.getElementById('photoEditorCanvas');
c.width = hzImgW;
c.height = hzImgH;
ctx = c.getContext('2d');
imgCanvas = new Image();
imgCanvas.src = path;
console.log("imgCanvas.src");
console.log(imgCanvas.src);
if (imgCanvas !== imgCanvas) {
console.log("canvas is load.....");
}
angular.element('input[type=range]').val(0);
imgCanvas.addEventListener('load', function() {
/*ctx.clearRect(0, 0, 0, 0);*/
console.log(imgCanvas);
ctx.drawImage(imgCanvas, 0, 0, hzImgW, hzImgH);
}, false);
};
//give effect by slider like hue, contrast, sepia
scope.applyImageParameters = function() {
var hue, cntrst, vibr, sep;
hue = parseInt(angular.element('#hue').val());
cntrst = parseInt(angular.element('#contrast').val());
vibr = parseInt(angular.element('#vibrance').val());
sep = parseInt(angular.element('#sepia').val());
Caman('#photoEditorCanvas', imgCanvas, function() {
this.revert(false);
//this.reloadCanvasData();
this.hue(hue).contrast(cntrst).vibrance(vibr).sepia(sep).render();
});
};
angular.element("input[type=range]").change("mouseup", function(e) {
scope.applyImageParameters();
console.log("event type: " + e.type);
var min = e.target.min,
max = e.target.max,
val = e.target.value;
angular.element(e.target).css({
'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
});
//scope.reloadCanvasData();
});
}
};
}])
->如果我评论“this.revert(false);”行并取消注释“this.reloadCanvasData();”行形式的“scope.applyImageParameters”函数然后它工作得很好，但它不会在色调 0、对比度 0 等下工作。
->如果我评论“this.reloadCanvasData();”行并取消注释“this.revert(false);”行形式“scope.applyImageParameters”函数然后效果很好但它显示旧图像而不是当前图像具有效果
图片附有两个屏幕分类以获取更多详细信息。
First edited image after giving effect
Second image after giving effect
谁能帮我解决这个问题？
最佳答案
您应该删除 Canvas 并再次创建 Canvas 。
.directive('hzPhotoEditor', ['$timeout', function($timeout) {
return {
restrict: "E",
link: function(scope, elem, attrs) {
var imgCanvas, $save;
//init photo when click on real photo
scope.$on("fillCanvas", function(event, data) {
console.log("fill canvas called");
console.log(data.photo);
scope.fillCanvas(data);
});
scope.fillCanvas = function(data) {
var hzMIW = 0,
hzMIH = 0,
hzImgH = 0,
hzImgW = 0,
path = '',
c, c1, ctx, ctx1;
angular.element(".hz-photo-editor-wrapper").attr("style", angular.element(".hz-modal-wrapper").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-left").attr("style", angular.element(".hz-modal-wrapper .hz-left").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-modal-image-wrapper").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image-wrapper").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-modal-image").attr("style", angular.element(".hz-modal-wrapper .hz-modal-image").attr("style"));
angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("height", angular.element(".hz-modal-slider-image").height());
angular.element(".hz-photo-editor-wrapper .hz-photo-editor-img").attr("width", angular.element(".hz-modal-slider-image").width());
hzMIW = angular.element(".hz-modal-wrapper .hz-modal-image").css("width").replace("px", "");
hzMIH = angular.element(".hz-modal-wrapper .hz-modal-image").css("height").replace("px", "");
hzImgH = angular.element(".hz-modal-wrapper .hz-modal-image img").css('height').replace("px", "");
hzImgW = angular.element(".hz-modal-wrapper .hz-modal-image img").css('width').replace("px", "");
$(".hz-modal-image").children("canvas").remove();
var canvas_ = $("<canvas></canvas>").attr({id: 'photoEditorCanvas'});
$(".hz-modal-image").append(canvas_);
c = document.getElementById('photoEditorCanvas');
c.width = hzImgW;
c.height = hzImgH;
ctx = c.getContext('2d');
imgCanvas = new Image();
imgCanvas.src = path;
console.log("imgCanvas.src");
console.log(imgCanvas.src);
if (imgCanvas !== imgCanvas) {
console.log("canvas is load.....");
}
angular.element('input[type=range]').val(0);
imgCanvas.addEventListener('load', function() {
/*ctx.clearRect(0, 0, 0, 0);*/
console.log(imgCanvas);
ctx.drawImage(imgCanvas, 0, 0, hzImgW, hzImgH);
}, false);
};
//give effect by slider like hue, contrast, sepia
scope.applyImageParameters = function() {
var hue, cntrst, vibr, sep;
hue = parseInt(angular.element('#hue').val());
cntrst = parseInt(angular.element('#contrast').val());
vibr = parseInt(angular.element('#vibrance').val());
sep = parseInt(angular.element('#sepia').val());
Caman('#photoEditorCanvas', imgCanvas, function() {
this.revert(false);
//this.reloadCanvasData();
this.hue(hue).contrast(cntrst).vibrance(vibr).sepia(sep).render();
});
};
angular.element("input[type=range]").change("mouseup", function(e) {
scope.applyImageParameters();
console.log("event type: " + e.type);
var min = e.target.min,
max = e.target.max,
val = e.target.value;
angular.element(e.target).css({
'backgroundSize': (val - min) * 100 / (max - min) + '% 100%'
});
//scope.reloadCanvasData();
});
}
};
}])
关于javascript - 如何在带有动态图像的camanJs canvas中产生效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44180276/