TypeError: Cannot create property 'style' on string 'a'

Question

Honestly do not know whats happen, this was working this morning, have not changed a thing but now when i click my button to generate my images I get this error.

Can anyone tell me why and how to fix this please.

Error

        test initMock test generate 1
        TypeError: Cannot create property 'style' on string 'a'
        at i._createCanvasElement (fabric.min.js:2)
        at i._createLowerCanvas (fabric.min.js:2)
        at i._initStatic (fabric.min.js:2)
        at initialize (fabric.min.js:3)
        at new i (fabric.min.js:1)
        at b.$scope.uploadImage (controller.js:855)
        at b.$scope.generate (controller.js:929)
        at fn (eval at compile (angular.js:15500), <anonymous>:4:144)
        at e (angular.js:27285)
        at b.$eval (angular.js:18372)

my functions

$scope.uploadImage = function (where) {
        var deferred = $q.defer();
        if (where === 'upload') {
            var f = document.getElementById('uploadCreative').files[0];
            var r = new FileReader();
            r.onload = function () {
                var image = new Image();
                image.src = r.result;
                image.onload = function () {
                    $scope.resize(image.src).then(function (response) {
                        deferred.resolve(response);
                        console.log('hehe NO!');
                        console.log('hehe NO!');
                    }).catch(function (response) {
                    })
                }
            };
            r.readAsDataURL(f);
        }
        if (where === 'local') {
            function ax(a, callback) {
                callback(localStorage.getItem(a));
            }

            var loadCanvas = new fabric.Canvas('a');
            divHeight = $('.image-builder').height();
            if ($scope.format === '1') {
                Aratio = 0.67;
            } else if ($scope.format === '2') {
                Aratio = 0.56;
            } else if ($scope.format === '3') {
                divHeight = divHeight / 1.5;
                Aratio = 2;
            } else if ($scope.format === '4') {
                Aratio = 0.67;
            } else {
                Aratio = 1
            }
            loadCanvas.setHeight(divHeight - 15);
            loadCanvas.setWidth((divHeight - 15) * Aratio);


            if (localStorage.getItem('backgroundImage') !== 'null') {
                background = localStorage.getItem('backgroundImage');
                var imgBc = new Image();
                imgBc.onload = function () {
                    // this is syncronous
                    Iwidth = this.width;
                    Iheight = this.height;


                    var f_img = new fabric.Image(imgBc);
                    loadCanvas.setBackgroundImage(f_img, loadCanvas.renderAll.bind(loadCanvas), {
                        scaleY: loadCanvas.height / Iheight,
                        scaleX: loadCanvas.width / Iwidth
                    });
                    var test = ax('CC-canvas', function (response) {
                        loadCanvas.loadFromJSON(response, function () {
                            loadCanvas.renderAll();
                            $scope.resize(loadCanvas.toDataURL()).then(function (response) {
                                deferred.resolve(response);
                            }).catch(function (response) {
                            })

                        });


                    });
                };
                imgBc.src = background;

            } else {

                var test = ax('CC-canvas', function (response) {
                    loadCanvas.loadFromJSON(response, function () {
                        loadCanvas.renderAll();
                        $scope.resize(loadCanvas.toDataURL()).then(function (response) {
                            deferred.resolve(response);
                        }).catch(function (response) {
                            console.log(response);
                        })
                    });
                });
            }
        }
        return deferred.promise;
    };



  $scope.generate = function () {
        $scope.generating = true;
        $scope.generateBtn = 'Generating';
        for (i = 0; i < $scope.gallery.length; i++) {
            $scope.select[i] = '';
        }
        $scope.gallery = [];
        $scope.checkPhoto = [];

        console.log("test generate 1");
        $scope.uploadImage($scope.creative).then(function (result) {
            console.log("test generate 2");
            $scope.generateCanvas(result, $scope.left, $scope.tops, $scope.wi, $scope.hi, $scope.per, $scope.btmR, $scope.btmL, $scope.backUrl)
                .then(function () {
                    $timeout(function () {
                        //push final photo to array befor send to back end
                        $scope.photosToPhp.push(canvas2.toDataURL());
                    }, 800);

                    if ($scope.count < ($scope.photos[$scope.format].length - 1)) {
                        $scope.generate();
                        $scope.count++;
                        $scope.left = $scope.photos[$scope.format][$scope.count]['left'];
                        $scope.tops = $scope.photos[$scope.format][$scope.count]['tops'];
                        $scope.wi = $scope.photos[$scope.format][$scope.count]['wi'];
                        $scope.hi = $scope.photos[$scope.format][$scope.count]['hi'];
                        $scope.per = $scope.photos[$scope.format][$scope.count]['per'];
                        $scope.btmR = $scope.photos[$scope.format][$scope.count]['btmR'];
                        $scope.btmL = $scope.photos[$scope.format][$scope.count]['btmL'];
                        $scope.backUrl = "/mm3/public/img/formats/" + $scope.format + "/" + $scope.photos[$scope.format][$scope.count]['backUrl'];

                        $scope.$apply();
                        console.log("test generate 3");
                    } else {
                        //all photos've been pushed now sending it to back end
                        $timeout(function () {
                            // console.log($scope.photosToPhp[0]);
                            $http.post('/mm3/savePhoto', $scope.photosToPhp).then(function (success) {
                                $scope.generating = false;
                                $scope.generateBtn = 'Generate';
                                //creating mock up gallery
                                for (var x = 0; x < success.data.photos; x++) {
                                    var file = '/mm3/tmp/' + success.data.folder + "/out" + x + ".png";
                                    $scope.gallery.push(file);
                                }
                                $scope.photosToPhp = [];
                            }, function (error) {
                            });

                        }, 800);
                        $scope.count = 0;
                        $scope.left = $scope.photos[$scope.format][$scope.count]['left'];
                        $scope.tops = $scope.photos[$scope.format][$scope.count]['tops'];
                        $scope.wi = $scope.photos[$scope.format][$scope.count]['wi'];
                        $scope.hi = $scope.photos[$scope.format][$scope.count]['hi'];
                        $scope.per = $scope.photos[$scope.format][$scope.count]['per'];
                        $scope.btmR = $scope.photos[$scope.format][$scope.count]['btmR'];
                        $scope.btmL = $scope.photos[$scope.format][$scope.count]['btmL'];
                        $scope.backUrl = "/mm3/public/img/formats/" + $scope.format + "/" + $scope.photos[$scope.format][$scope.count]['backUrl'];
                        $scope.$apply();
                    }
                    console.log("test generate 4");
                })
                .catch(function (errorUrl) {
                    console.log(errorUrl);
                })

        })
    };

Answer 1

解决了将结构js降级到1.5而不是我升级到1.7的问题，不知道为什么这行得通，但是