简体   繁体   English

如何在带有动态图像的camanJs画布中发挥作用?

[英]how to give effect in camanJs canvas with dynamic image?

I am developing mean stack application. 我正在开发平均堆栈应用程序。
I am stuck in photo editor. 我被卡在照片编辑器中。
I have use " Camanjs " for give effect to photo and edit it in angularjs 1. It will works very well with first image for slider, but if i select any other image form slider after edit first image then it display old image. 我已经使用“ Camanjs ”来赋予照片效果并在angularjs 1中对其进行编辑。它将与滑块的第一个图像一起很好地工作,但是如果在编辑第一个图像之后选择任何其他图像形式的滑块,则它将显示旧图像。

my file (directive in angularjs) 我的文件(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();

            });
        }
    };
}])

->if I comment on "this.revert(false);" ->如果我评论“ this.revert(false);” line and uncomment "this.reloadCanvasData();" 行和取消注释“ this.reloadCanvasData();” line form "scope.applyImageParameters" function then it works very well, but it will not work in hue 0, contrast 0,etc. 行形式的“ scope.applyImageParameters”函数,则效果很好,但在色相0,对比度0等下将不起作用。

->if I comment on "this.reloadCanvasData();" ->如果我评论“ this.reloadCanvasData();” line and uncomment "this.revert(false);" 行和取消注释“ this.revert(false);” line form "scope.applyImageParameters" function then effect works verry well but it display old image not current image with effect 行形式的“ scope.applyImageParameters”函数,效果效果很好,但显示旧图像而不是当前图像

Image attached two screen sort for more details. 图像附有两个屏幕,以获取更多详细信息。

First edited image after giving effect 生效后首先编辑的图像

Second image after giving effect 效果生效后的第二张图片

Can any body help me to resolve this issue? 任何机构都可以帮助我解决此问题吗?

You should remove canvas and the again create a 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();

        });
    }
};
}])

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM