&引用;不允许将顶部框架导航到数据URL“;在javascript中下载画布时
在我的网站上,我试图下载我创作的污染画布。当我尝试这样做时,我得到了“不允许将顶部框架导航到数据URL:”(后跟一个数据字符串) 我看过其他关于这一点的帖子,他们通常试图展示他们的画布或其他东西,而不是保存画布 这是我的密码:&引用;不允许将顶部框架导航到数据URL“;在javascript中下载画布时,javascript,download,html5-canvas,Javascript,Download,Html5 Canvas,在我的网站上,我试图下载我创作的污染画布。当我尝试这样做时,我得到了“不允许将顶部框架导航到数据URL:”(后跟一个数据字符串) 我看过其他关于这一点的帖子,他们通常试图展示他们的画布或其他东西,而不是保存画布 这是我的密码: //it looks complicated, but the only important lines are the ones before the else statement, function download_img(el) { //the if statem
//it looks complicated, but the only important lines are the ones before the else statement,
function download_img(el) {
//the if statement is used to see if this is using the canvas or not
if(document.getElementById("canvasImage").style.display != "none"){
alert('canvas')
var canvImg = document.getElementById("canvasImage").toDataURL("image/jpg");
el.href = canvImg;
}else{
//again, this code is for the image side of the project, which works fine
alert('image')
var xhr = new XMLHttpRequest();
xhr.open("GET", document.getElementById("theImg").src, true);
xhr.responseType = "blob";
xhr.onload = function(){
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement('a');
tag.href = imageUrl;
tag.download = "meme";
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
}
xhr.send();
}
}
我的HTML:
<a style="float:left;display:inline;" href="" onclick="download_img(this)">Canvas Button</a>
我想做的是保存画布。将
下载
属性添加到
标记,以强制其下载,而不是导航。谢谢,这确实帮助了我。对于任何感到困惑的人,请在标签“download=fooName”中填写