使用javascript从画布下载图像

-1

我试图通过下面的代码下载加载的图像，但这是行不通的（不下载）我需要下载我的电脑本地存储加载的图像
我越来越错误 - >安全例外使用javascript从画布下载图像

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <img id="imageId" src="https://lh3.googleusercontent.com/Eaxq_eRyitzuD_wcptI_RBva0CiqzWPztZolEDfKrdftel4ENSf2XinyJyjPecUrJQ" \t > 
 
    <button onclick="storeImageIntoLocal()">Copy Image </button> 
 
    <script> 
 
     function storeImageIntoLocal() { 
 
     var img=document.getElementById('imageId'); 
 
     img.crossOrigin = "anonymous"; 
 
     var canvas = document.createElement("canvas"); 
 
     canvas.width = (img.width+50); 
 
     canvas.height = (img.height+15); 
 
     var body = document.getElementsByTagName("body")[0]; 
 
     body.appendChild(canvas); 
 
    \t \t 
 
     var ctx = canvas.getContext("2d"); 
 
     ctx.drawImage(img, 0, 0); 
 
    \t 
 
     var dataURL = canvas.toDataURL("image/png"); // this is not working 
 
    \t alert("converted"); 
 
    \t 
 
    \t localStorage.setItem("image",dataURL);// this is not working 
 

 
     // var base64dataFinal= dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
 
     } 
 

 
    </script> 
 
    </body> 
 
</html>

来源

2017-10-12 user8767901

我想，一个也不过无法下载图像 – user8767901

请阅读[你所面临的问题最小的可重复的例子（HTTPS ：//stackoverflow.com/help/mcve） –

除了伊戈尔说的话之外，提到你到目前为止已经尝试过的东西真的很有帮助，包括其他答案，并且提及它们以及你得到的错误 –

localStorage.setItem("image", dataURL);预计不会触发文件下载。这是一个明显错误的API来首先调用。

你需要创建一个<a> html元素，并指定其href属性dataURL值，则触发就可以了click()。详见这个问题：https://stackoverflow.com/a/26050821/482868

var downloadLink = document.createElement('a'); 
downloadLink.href = dataURL; 
downloadLink.download = 'myImage.png'; 

document.body.appendChild(downloadLink); 
downloadLink.click(); 
document.body.removeChild(downloadLink);

来源

2017-10-12 22:02:58

我不想创建任何新代码转换成html代码，我想用j保存它avascript或转换成base64格式，这个画布加载图像 – user8767901

“我不想创建任何新的标签到HTML代码”。它被创建并在下载被触发后立即被删除。如果你不想创建一个标签 - 祝你好运找到替代品（如果你搜索更多，你会发现_everyone_这样做） –

我的意思是说，我不想创建任何其他标签到我的HTML通过编写一些HTML代码来创建任何新的标签可以通过使用javascript – user8767901

你应该通过图像创建新的图像（）。这里是解决方案：

function storeImageIntoLocal() { 
 
    var img=document.getElementById('imageId'); 
 
    var imgI = new Image(); 
 
    imgI.setAttribute('crossOrigin', 'anonymous'); 
 
    imgI.src = img.src; 
 
    var canvas = document.createElement("canvas"); 
 
    canvas.width = (img.width+50); 
 
    canvas.height = (img.height+15); 
 

 
    var body = document.getElementsByTagName("body")[0]; 
 
    body.appendChild(canvas); 
 
    \t \t 
 
    var ctx = canvas.getContext("2d"); 
 
    ctx.drawImage(imgI, 0, 0); 
 
    \t 
 
    var dataURL = canvas.toDataURL("image/jpg"); 
 
    alert("converted"); 
 

 
    localStorage.setItem("image",dataURL); 
 
}

此代码对我的作品

来源

2017-10-12 22:05:53

谢谢你这个答案，但这没有帮助对我来说，这是行不通的 – user8767901

@Dmitry，这段代码不会导致_file download_。它只将它存储在与原始代码相同的localStorage中。 –

我们可以得到这个画布的base64格式加载图像 – user8767901

使用javascript从画布下载图像

回答

相关问题