当我尝试将画布保存到数据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)而不是文件吗?