保存画布时出错

时间:2013-11-29 12:31:58

标签: javascript html5 canvas

当我尝试将画布保存到数据URL时,会抛出错误。

以下是我的代码的工作方式:首先,我正在绘制图像,然后填写文本并保存画布,然后在创建用户配置文件后创建相册,创建后保存该图像(画布结果) )先进入我的服务器,然后进入用户相册。当我删除ajax请求时,一切正常。

为什么我的操作不安全以及如何解决问题?

var canvas = document.getElementById('result');
            var context = canvas.getContext('2d');

            resIMG = new Image();

            resIMG.onload = function() {
                function wrapText(context, text, lineHeight) {
                    var words = text.split("\n");
                    var cFont = context.font;
                    var line = '';                  
                    var posX = [25,25,25,25,25,25,25,25,25,440,515];
                    var posY = [80,110,145,165,210,230,270,290,345,360,430];
                    var maxWidth = [400,170];
                    var m = 0;
                    var fStyles = ['#9D9D9D','#161616','#9D9D9D','#2490CE','#9D9D9D','#3EC11B','#9D9D9D','#D14975','#878787','#ffffff','#ffffff'];
                    var fSize = ['13pt','bold 25pt','13pt','bold 15pt','13pt','bold 15pt','13pt','bold 15pt','12pt','13pt','13pt'];
                    for(var n = 0; n < words.length; n++) {             
                        context.font = fSize[n] + ' Calibri';
                        context.fillStyle = fStyles[n];
                        if (n > 7 && n !== 10) {
                            var splitet = words[n].split(" ");
                            var lineX = posX[n];
                            var lineY = posY[n];
                            for(var s=0;s<splitet.length;s++){
                                var testLine = line + splitet[s] + ' ';
                                var metrics = context.measureText(testLine);
                                var testWidth = metrics.width;                      
                                if (testWidth > maxWidth[m]) {
                                    context.fillText(line, lineX, lineY);
                                    line = splitet[s] + ' ';
                                    lineY += lineHeight;
                                }
                                else {
                                    line = testLine;
                                }
                            }
                            m++;
                        }
                        else{
                            context.fillText(words[n], posX[n], posY[n]);
                        }                               
                    }          
                }

                var lineHeight = 20;
                var logo = new Image();
                logo.src = 'img/logo.png';
                var filter = new Image();
                filter.src = 'img/ResFilter.jpg';
                var resIcon = new Image();
                resIcon.src = 'img/ResIcon.jpg';
                filter.onload = function() {
                    setTimeout( function(){
                        context.drawImage(filter, 0, 0, 700, 451); // draw filter
                        context.drawImage(resIMG, 431.3, 6.7, 261, 436); // draw result pic
                        context.drawImage(resIcon, 25, 15, 33, 34); // draw result icon
                        context.drawImage(logo, 565, 15, 115, 20); // draw logo
                        context.font = '14pt Calibri';
                        context.fillStyle = '#8A8A8A';
                        context.fillText("Резултат теста", 58, 41);
                        context.font = '10pt Calibri';
                        context.fillStyle = '#FE7D77';
                        context.fillText("vk.com/testervk", 592, 48);

                        wrapText(context, resTEXT, lineHeight);
                    },500);                 
                };
            }

            resIMG.src = result.pic;
            resTEXT = result.des;

            setTimeout(function(){
                //var canvas = document.getElementById('result');   
                fullResultat = canvas.toDataURL();              
                fullResultat = fullResultat.substring(22);

                VK.api("photos.getAlbums", {
                    'owner_id' : user.id
                }, function(getAlbum) {
                    var x = getAlbum.response;
                    var y = '';
                    for (var i = 0; i < Object.keys(x).length; i++) {
                        if (x[i].title == 'Tester') {
                            y = x[i];
                        }
                    }
                    if (y !== '') {
                        console.log(y);
                        Album.id = y.aid;
                        VK.api("photos.getUploadServer", {
                            'aid' : Album.id
                        }, function(getURL) {
                            $.ajax({
                                url : 'api_uploader.php',
                                type : 'post',
                                data : {
                                    'upload_url' : getURL.response.upload_url,
                                    'img' : fullResultat
                                },
                                dataType : 'json',
                                success : function(datad) {
                                    //JSON.parse(datad);
                                    VK.api("photos.save", {
                                        'aid' : Album.id,
                                        'server' : datad.server,
                                        'photos_list' : datad.photos_list,
                                        'hash' : datad.hash,
                                    }, function(photoSaveData) {
                                        if (photoSaveData.response) {
                                            VK.api("wall.post", { owner_id: user.id, attachments : photoSaveData.response[0].id+',http://vk.com/app3721792_217821202', message: 'result.des' }, function(r) {               
                                    if (r.response) {
                                        alert('posted!');                       
                                    }
                                });

                                            //data.logo = photoSaveData.response[0].src_big;
                                            console.log(photoSaveData.response[0].src_big);
                                        } /* end of VK API photos.save success if function */
                                    });
                                    /* end of VK API photos.save */
                                } /* end of ajax request to api_uploader.php success function */
                            });
                            /* end of ajax request to api_uploader.php */
                        });
                        /* end of VK API photos.getUploadServer */
                    } else {
                        console.log('chka');
                        VK.api("photos.createAlbum", {
                            title : 'Tester',
                            comment_privacy : 3,
                            privacy : 0
                        }, function(album) {
                            Album.id = album.response.aid;
                            VK.api("photos.getUploadServer", {
                                'aid' : Album.id
                            }, function(getURL) {
                                $.ajax({
                                    url : 'api_uploader.php',
                                    type : 'post',
                                    data : {
                                        'upload_url' : getURL.response.upload_url,
                                        'img' : fullResultat
                                    },
                                    dataType : 'json',
                                    success : function(datad) {
                                        //JSON.parse(datad);
                                        VK.api("photos.save", {
                                            'aid' : Album.id,
                                            'server' : datad.server,
                                            'photos_list' : datad.photos_list,
                                            'hash' : datad.hash,
                                        }, function(photoSaveData) {
                                            if (photoSaveData.response) {
                                                //data.logo = photoSaveData.response[0].src_big;


                                                console.log(photoSaveData.response[0].src_big);
                                            } /* end of VK API photos.save success if function */
                                        });
                                        /* end of VK API photos.save */
                                    } /* end of ajax request to api_uploader.php success function */
                                });
                                /* end of ajax request to api_uploader.php */
                            });
                            /* end of VK API photos.getUploadServer */
                        });
                        /* end of VK API photos.createAlbum */
                    }
                }); 
            },1000);
瘟疫报告

SecurityError: The operation is insecure.
fullResultat = canvas.toDataURL();

P.S。我可以发送到VK(Vkontakte(Russion社交网络))服务器DaraURL(字节数组|| base64_decoded)而不是文件吗?

0 个答案:

没有答案