通过使用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">
但是,让浏览器提示保存文件的位置是用户需要配置的(Chrome,Firefox)。
不过,如果你不介意打扰你网站的用户,你可以提示他们使用
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>