类型错误:无法在字符串 'a' 上创建属性 'style'

老实说不知道发生了什么,这是今天早上工作的,没有改变任何事情,但是现在当我点击我的按钮生成我的图像时,我收到了这个错误。

谁能告诉我为什么以及如何解决这个问题。

错误

        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)

我的职能

$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);
                })

        })
    };

解决了将 Fabric js 降级到 1.5 而不是我升级到的 1.7 的问题,不知道为什么会这样,但确实有效

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

未捕获的TypeError:无法在字符串“ wtd_background_image”上创建属性“ style”

收到错误“ TypeError:无法在字符串'control'上创建属性'validator'”

Angular TypeError:无法在字符串''上创建属性

TypeError:无法在字符串“ /:id”上创建属性“ next”

无法在字符串 '' 上创建属性 'fillColor'

错误:`style`属性期望从样式属性到值而不是字符串的映射

类型错误:无法分配给字符串的只读属性“0”

类型错误:无法在反应中读取未定义的属性“子字符串”

错误无法将字符串文件路径上的类型“ void”隐式转换为“ string”

无法访问原始类型值(字符串)的属性

无法使用组件工厂在字符串“ userForm”上创建属性“ validator”

TypeError:无法在setUpControl的字符串“ [email protected]”上创建属性“ validator”

无法在字符串'__zone_symbol__optimizedZoneEventTask'上创建属性'__creationTrace__'

使用gmail的Nodemailer,无法在字符串“ SMTP”上创建属性“ mailer”

无法在字符串“ Information Technology” angularjs上创建“ selected”属性

未被捕获的TypeError:无法在字符串'上创建属性'guid'

未被捕获的TypeError:无法在字符串“”上创建属性“ empFirstName”

Typescript在接口中定义的属性类型为string | ()=>字符串给出“无法调用表达式错误”

未捕获的类型错误:无法在字符串上创建属性“guid”

打字稿错误:TS2339:类型“字符串”上不存在属性“地图”

错误TS2339:类型“字符串”上不存在属性“ endsWith”

属性“ matchAll”在“字符串”类型上不存在

类型“字符串”上不存在属性“目标”

style道具需要从样式属性到值而不是字符串的映射

为什么element.style.backgroundColor属性会给出一个空字符串?

打字稿错误在类型上找不到带有“字符串”类型参数的索引签名

从字符串动态创建字符串文字类型

为什么在字符串对象上出现属性错误?

如何使用多个分隔符将字符串缩减为自定义对象,未捕获(承诺):类型错误:无法读取未定义的属性