3
我正在開發平均堆棧應用程序。
我被困在照片編輯器中。
我使用「Camanjs」爲照片效果並在angularjs 1編輯它。 它將適用於滑塊的第一個圖像，但如果我編輯第一個圖像後選擇任何其他圖像形式滑塊，然後它顯示舊圖像。如何在動態圖像的camanJs畫布中發揮作用？
我的文件（在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（假）;」行並取消註釋「this.reloadCanvasData（）;」線形式「scope.applyImageParameters」函數，然後它工作得很好，但它不會在色相0，對比度0等工作。
- >如果我評論「this.reloadCanvasData（）;」並取消註釋「this.revert（false）;」線形式「scope.applyImageParameters」功能，然後效果作品很好，但它顯示舊圖像不是當前圖像有效
圖像附加兩個屏幕排序的更多細節。
First edited image after giving effect
Second image after giving effect
任何機構可以幫我解決這個問題？