[英]how to give effect in camanJs canvas with dynamic image?
我正在開發平均堆棧應用程序。
我被卡在照片編輯器中。
我已經使用“ Camanjs ”來賦予照片效果並在angularjs 1中對其進行編輯。它將與滑塊的第一個圖像一起很好地工作,但是如果在編輯第一個圖像之后選擇任何其他圖像形式的滑塊,則它將顯示舊圖像。
我的文件(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”函數,效果效果很好,但顯示舊圖像而不是當前圖像
圖像附有兩個屏幕,以獲取更多詳細信息。
任何機構都可以幫助我解決此問題嗎?
您應該刪除畫布,然后再次創建畫布。
.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();
});
}
};
}])
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.