通过使用CANVAS,我正在拍摄一张来自web Come的快照。这里我创建了下载按钮来下载图像。但是在下载时,它将下载到浏览器的默认位置。但我的要求是给用户选择下载位置。
下面是代码:

<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>

当我们点击下载时,我想把图片保存到特定的文件夹中。非常感谢

最佳答案

通过向链接(not supported in all browsers)添加download属性,可以指定文件的名称:

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

但是,让浏览器提示保存文件的位置是用户需要配置的(ChromeFirefox)。
不过,如果你不介意打扰你网站的用户,你可以提示他们使用right-click>Save as下载文件。
例如。:
document.getElementById('saveImg').addEventListener('click',function(event){
    alert("To download, please use right-click -> Save as.");
    event.preventDefault();//Do not start the download
},false);

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

09-27 03:57
查看更多