如何保存具有特定文件名的画布图像
[英]How to save a canvas image with a specific filename
问题描述
我有一个网页，可以显示实时流，然后可以对实时流进行快照。
我需要有一个按钮，可以使用我自己的特定文件名（可以是今天的日期）将图像保存在画布中。
急需它。 感谢那些会做出回应的人！ :)
这是代码：
<!DOCTYPE html>
<html>
<head>
<title>Video Live Stream</title>
<link rel="stylesheet" type="text/css" href="demo'.css"/>
</head>
<body>
<center>
<style>
<p>
video { border: 20px solid #ccc; display: block; margin: 0 0 -5px 0; }
#canvas { margin-top: 20px; border: 1px solid #ccc; display: block; }
</p>
</style>
</br>
<h3>Live Stream with Snap Shot</h3>
<div align="center">
<video style="position:relative;top:-75px;" id="video" width="600" height="600" autoplay="">
</video>
</div>
<div align="center">
<button style="position:relative;top:-60px;" id="snap" class="sexyButton">Snap Photo</button>
<canvas style="position:relative;top:-60px;" class="input" id="canvas" width="640" height="480"></canvas>
</div>
<a href="#" id="downloader" onclick="$filename">Download!</a>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</center>
</body>
</html>
2 个解决方案
解决方案1
2 2016-01-10 15:59:17
自动文件下载
您不能保证文件名，但可以建议文件名。 客户端可以覆盖文件名，因为它只是下载请求，并受客户端下载策略的约束。 如果用户允许文件以给定的名称保存，则事件会通过更改文件名（或其他内容，具体取决于浏览器）而在下载目录中存在（如果文件存在）的情况下仍然更改。
这是一个简单的下载图像功能。 它将尝试使用给定文件名将图像作为PNG保存（通过下载）到客户端的文件系统中。 将拍摄图像或画布图像。
更新资料
正如markE所指出的，并非所有浏览器都支持我用来设置文件名的下载属性。 因此，只有支持该属性的浏览器才能让您设置下载名称。
此外，如果不支持MouseEvent对象，则给定的功能也不会下载。 我为旧版浏览器（即IE）添加了传统方法fireEvent，否则该功能将无法下载。
function saveAsPNG(image, filename){ // No IE <11 support. Chrome URL bug for large images may crash
var anchorElement, event, blob;
function image2Canvas(image){ // converts an image to canvas
function createCanvas(width, height){ // creates a canvas of width height
var can = document.createElement("canvas");
can.width = width;
can.height = height;
return can;
};
var newImage = canvas(img.width, img.height); // create new image
newImage.ctx = newImage.getContext("2d"); // get image context
newImage.ctx.drawImage(image, 0, 0); // draw the image onto the canvas
return newImage; // return the new image
}
if(image.toDataURL === undefined){ // does the image have the toDataURL function
image = image2Canvas(image); // No then convert to canvas
}
// if msToBlob and msSaveBlob then use them to save. IE >= 10
// As suggested by Kaiido
if(image.msToBlob !== undefined && navigator.msSaveBlob !== undefined){
blob = image.msToBlob();
navigator.msSaveBlob(blob, filename + ".png");
return;
}
anchorElement = document.createElement('a'); // Create a download link
anchorElement.href = image.toDataURL(); // attach the image data URL
// check for download attribute
if ( anchorElement.download !== undefined ) {
anchorElement.download = filename + ".png"; // set the download filename
if (typeof MouseEvent === "function") { // does the browser support the object MouseEvent
event = new MouseEvent( // yes create a new mouse click event
"click", {
view : window,
bubbles : true,
cancelable : true,
ctrlKey : false,
altKey : false,
shiftKey : false,
metaKey : false,
button : 0,
buttons : 1,
}
);
anchorElement.dispatchEvent(event); // simulate a click on the download link.
} else
if (anchorElement.fireEvent) { // if no MouseEvent object try fireEvent
anchorElement.fireEvent("onclick");
}
}
}
使用功能
saveAsPNG(canvas,"MyTest"); // Will attempt to save the canvas as "MyTest.png"
这不能保证文件将被保存或文件名将是您想要的。 如果要保证文件名，则必须将文件保存在zip文件中。 这是很多工作，但仍不能保证文件将被保存。 安全性要求客户端必须有权接受或拒绝任何下载请求。 没有办法回避这个问题。
解决方案2
-1 已采纳 2016-01-11 10:55:31
我只是找到了一种使用自己的文件名保存画布图像的方法。 你可以在找到它
http://eligrey.com/demos/FileSaver.js/
编辑画布部分：
<section id="image-demo">
<form id="canvas-options">
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="filename"/>.png</label>
<input type="submit" value="Save"/>
<input type="button" id="canvas-clear" value="Clear"/>
</form>
并插入以下脚本：
<script type="application/ecmascript" async="" src="Blob.js"/>
<script type="application/ecmascript" async="" src="canvas-toBlob.js"/>
<script type="application/ecmascript" async="" src="FileSaver.js"/>
<script type="application/ecmascript">
有效！
如何保存画布图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.