平均スタックアプリケーションを開発中です。
Iは、フォトエディタで立ち往生しています。
写真に与える効果を与えるために "Camanjs"を使用しています。 これはスライダの最初のイメージではうまく動作しますが、最初のイメージを編集した後に他のイメージフォームスライダを選択すると、古い画像。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();" lineform "scope.applyImageParameters"関数は非常にうまく動作しますが、色相0、コントラスト0などでは機能しません。
- >私はにコメント場合は "this.reloadCanvasData();" "this.revert(false);のコメントを外します。ラインフォーム「scope.applyImageParameters」機能そして効果は十分にverry動作しますが、それは効果
イメージと古いイメージ現在のない画像が表示され、より詳細には2つの画面のソートを取り付けました。
First edited image after giving effect
Second image after giving effect
すべてのボディは、この問題を解決するために私を助けることができますか?