javascript - 错误：错误：Angular 1 中的 multidir 多指令资源争用

Question

Angular 1 中存在多个指令资源连接问题。我创建了一个用于压缩图像的指令。但它在路由或刷新屏幕时返回错误。

这是我的代码：

<input type="file" class="form-control fileAttachment  col-md-5" file-model="attachedFile" id="iAttachment" image="item.attachmentUrl"
                                                resize-max-height="800" resize-max-width="200" resize-quality="1" resize-type="image/jpg" image-optimize />

指令代码

 app.directive('imageOptimize', ['$q',
        function ($q) {
            
            var URL = window.URL || window.webkitURL;

            var getResizeArea = function () {
                var resizeAreaId = 'fileupload-resize-area';

                var resizeArea = document.getElementById(resizeAreaId);

                if (!resizeArea) {
                    resizeArea = document.createElement('canvas');
                    resizeArea.id = resizeAreaId;
                    resizeArea.style.visibility = 'hidden';
                    document.body.appendChild(resizeArea);
                }

                return resizeArea;
            };

            /**
             * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed
             * @param {Image} sourceImgObj The source Image Object
             * @param {Integer} quality The output quality of Image Object
             * @return {Image} result_image_obj The compressed Image Object
             */

            var jicCompress = function (sourceImgObj, options) {
                var outputFormat = options.resizeType;
                var quality = options.resizeQuality * 100 || 70;
                var mimeType = 'image/jpeg';
                if (outputFormat !== undefined && outputFormat === 'png') {
                    mimeType = 'image/png';
                }


                var maxHeight = options.resizeMaxHeight || 300;
                var maxWidth = options.resizeMaxWidth || 250;

                var height = sourceImgObj.height;
                var width = sourceImgObj.width;

                // calculate the width and height, constraining the proportions
                if (width > height) {
                    if (width > maxWidth) {
                        height = Math.round(height *= maxWidth / width);
                        width = maxWidth;
                    }
                } else {
                    if (height > maxHeight) {
                        width = Math.round(width *= maxHeight / height);
                        height = maxHeight;
                    }
                }

                var cvs = document.createElement('canvas');
                cvs.width = width; //sourceImgObj.naturalWidth;
                cvs.height = height; //sourceImgObj.naturalHeight;
                var ctx = cvs.getContext('2d').drawImage(sourceImgObj, 0, 0, width, height);
                var newImageData = cvs.toDataURL(mimeType, quality / 100);
                var resultImageObj = new Image();
                resultImageObj.src = newImageData;
                return resultImageObj.src;

            };

            var resizeImage = function (origImage, options) {
                var maxHeight = options.resizeMaxHeight || 300;
                var maxWidth = options.resizeMaxWidth || 250;
                var quality = options.resizeQuality || 0.7;
                var type = options.resizeType || 'image/jpg';

                var canvas = getResizeArea();

                var height = origImage.height;
                var width = origImage.width;

                // calculate the width and height, constraining the proportions
                if (width > height) {
                    if (width > maxWidth) {
                        height = Math.round(height *= maxWidth / width);
                        width = maxWidth;
                    }
                } else {
                    if (height > maxHeight) {
                        width = Math.round(width *= maxHeight / height);
                        height = maxHeight;
                    }
                }

                canvas.width = width;
                canvas.height = height;

                //draw image on canvas
                var ctx = canvas.getContext('2d');
                ctx.drawImage(origImage, 0, 0, width, height);

                // get the data from canvas as 70% jpg (or specified type).
                return canvas.toDataURL(type, quality);
            };

            var createImage = function (url, callback) {
                var image = new Image();
                image.onload = function () {
                    callback(image);
                };
                image.src = url;
            };

            var fileToDataURL = function (file) {
                var deferred = $q.defer();
                var reader = new FileReader();
                reader.onload = function (e) {
                    deferred.resolve(e.target.result);
                };
                reader.readAsDataURL(file);
                return deferred.promise;
            };


            return {
                restrict: 'A',
                scope: {
                    image: '=',
                    resizeMaxHeight: '@?',
                    resizeMaxWidth: '@?',
                    resizeQuality: '@?',
                    resizeType: '@?'
                },
                link: function postLink(scope, element, attrs) {

                    var doResizing = function (imageResult, callback) {
                        createImage(imageResult.url, function (image) {
                            //var dataURL = resizeImage(image, scope);
                            var dataURLcompressed = jicCompress(image, scope);
                            // imageResult.resized = {
                            //  dataURL: dataURL,
                            //  type: dataURL.match(/:(.+\/.+);/)[1]
                            // };
                            imageResult.compressed = {
                                dataURL: dataURLcompressed,
                                type: dataURLcompressed.match(/:(.+\/.+);/)[1]
                            };
                            callback(imageResult);
                        });
                    };

                    var applyScope = function (imageResult) {
                        scope.$apply(function () {
                            if (attrs.multiple) {
                                scope.image.push(imageResult);
                            } else {
                                scope.image = imageResult;
                            }
                        });
                    };


                    element.bind('change', function (evt) {
                        //when multiple always return an array of images
                        if (attrs.multiple) {
                            scope.image = [];
                        }

                        var files = evt.target.files;
                        for (var i = 0; i < files.length; i++) {
                            //create a result object for each file in files
                            var imageResult = {
                                file: files[i],
                                url: URL.createObjectURL(files[i])
                            };

                            fileToDataURL(files[i]).then(function (dataURL) {
                                imageResult.dataURL = dataURL;
                            });

                            var size = (files[i].size) / 1000;
                            console.log('1. Size (in Kbs)', size);
                            size = Math.round(size);
                            console.log('2. Approx Size (in Kbs)', size);

                            if ((scope.resizeMaxHeight || scope.resizeMaxWidth) && size > 1000) { //resize image
                                doResizing(imageResult, function (imageResult) {
                                    applyScope(imageResult);
                                });
                            } else { //no resizing
                                applyScope(imageResult);
                            }
                        }
                    });
                }
            };
        }

标签： javascriptangularjs