Question

通过使用 CANVAS 我从网上拍摄了一下。我在这里创建了下载按钮来下载图片。但下载时它会下载到浏览器的默认位置。但我的要求是让用户选择下载位置。

以下是代码：

<head> 
<script>
//SNAPSHOT
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// "image/webp" works in Chrome 18. In other browsers, this will fall back to   image/png.
 document.querySelector('img').src = canvas.toDataURL('image/png');
}
}
video.addEventListener('click', snapshot, false);
}, false);

function snap() {
ctx.drawImage(video, 0, 0, 350, 320);
      var dataURL = canvas.toDataURL('image/png');
      document.getElementById('canvasImg').window.location = dataURL;
      document.getElementById('saveimg').href=canvas.toDataURL("image/png");
}

</script>


</head>
<body bgcolor="#70c7f2" onload="onload()">
<button id="snap" onclick="snap()">Snap Photo</button>
<video autoplay></video>
<br>
<canvas id="canvas" width="350" height="320" style="position: absolute;right: 0px;top: 10px; display: none;"></canvas>
 Save Here:
 <button><a id="saveimg" >Download</a></button><br>
 <img id="canvasImg">
 </body>
 </html>

当我们点击下载时，我想将该图像保存到特定的文件夹中。非常感谢

Answer 1

您可以通过向链接not supported in all browsers添加download属性为文件指定名称：

<a id="saveimg" download="MyFileName.png">

但是，让浏览器提示位置保存文件的位置是用户需要配置的内容（Chrome，Firefox）。

尽管如此，如果您不介意烦扰您网站的用户，可以提示他们使用right-click - ＆gt; Save as下载文件。

E.g：

＆＃13;

document.getElementById('saveImg').addEventListener('click',function(event){
    alert("To download, please use right-click -> Save as.");
    event.preventDefault();//Do not start the download
},false);

＆＃13;

To download, please use right-click -> Save as.<br>
<a id="saveImg" download="MyFileName.png" href="http://example.com">Link</a>

＆＃13;

Answer 2

此代码将画布内容显示为新浏览器选项卡中的图像

它还指示用户右键单击以保存。

当用户右键单击保存时，他们可以进入/浏览到他们选择的下载位置。

function save(canvas){
    var html="<p>Right-click on image below and Save-Picture-As</p>";
    html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>";
    var tab=window.open();
    tab.document.write(html);
});

如何将画布图像下载位置更改为用户特定位置？

2 个答案: