Video screenshots and uploads with canvas

Open blog So long has not written anything, now on their own in the study of the method used to summarize, convenient oneself also hope to help others.
I previously realized in the re-project using canvas to take screenshots of video and save, my idea is to use the canvas DrawImage method to draw screenshots, and then through the Canvas.todataurl (' Image/png '), the method is saved as an image. The image is a string "Data:image/png;base64,ivborw0kggoaaaan ..." that passes through the post to the server, "Data:image/png;base64, Ivborw0kggoaaaansu. "Intercept the string as" Ivborw0kggoaaaansuheugaaae "and then use Base64decoder decoding with FileOutputStream to save to the server to re-specify the path. The specific code is as follows:
1. Write the appropriate location in the foreground page:
<!-set video and canvas tags, video controls= "ture": With playback control, loop= "loop" loop playback, autoplay= "autoplay": Auto play after loading, height, Width: High and wide
Set the canvas style in Canvas:style, I don't show it as I want
<video id= "Media" src= ". /${sessionscope.danchapter.chcontent} "controls=" Ture "loop=" loop "height=" 100% "width=" 100% "autoplay=" AutoPlay " > Video lost. </video>
<canvas style= "Display:none" ></canvas>
2.js screenshot of function and upload to server
function Jietu () {
var video = document.getElementById ("media");//Get the video object that the foreground wants to take a screenshot of,
var canvas = document.queryselectorall (' canvas ') [0];//gets the foreground canvas object for drawing
var ctx = Canvas.getcontext (' 2d ');//Set Canvas to draw 2d graphs,
var width = 480;//Set canvas width
var height = 270;//Set Canvas height
Canvas.width = width;
Canvas.height = height;
Ctx.drawimage (video, 0, 0, width, height);//Draw video into canvas
var images = Canvas.todataurl (' image/png '); Todataurl () in//canvas's API save image
$.post ("Comment_shengcheng", {images:images},function (data) {///Send to the server by post, "Comment_shengcheng" : Struts2 (Action Name _ processing method name)
if (parseint ($.trim (data)) ==1) {//returns data to determine if the success
Console.info ("Video saved successfully");
}else{
Console.info ("Video Save Failed");
}
});
}
3. I use the Struts2 action mode, if it is the servlet way thinking.
Public String Shengcheng () {
Byte[] The destination byte array of the buffer;//image conversion
String yuliu1= "Upload/screen_" + New Date (). GetTime () + ". png";//Name of the file saved in the corresponding server
String ab=images.substring,//images is a picture string data, obtained through spring, where the string "data:image/png;base64," is truncated, so that it is properly formatted
Base64decoder base64=new Base64decoder (); New 64-bit decoder
try {
Buffer = Base64.decodebuffer (AB);//64-bit decoding into byte array
Writes a file to create an output file stream that writes data to a file with the specified name. Creates a new FileDescriptor object to represent this file connection.
String Sdpath=servletactioncontext.getservletcontext (). Getrealpath ("");//Gets the server's top-level path to the project, which is the root path of the web, using Tomcat here.
FileOutputStream fos=new FileOutputStream (New File (sdpath.substring ("\ \") + "/" 0,sdpath.lastindexof)); Set the save path to create the file output stream.
Fos.write (buffer); Write
Fos.flush (); Refresh
Fos.close (); Shut down
fos=null;//Release
} catch (IOException e) {
E.printstacktrace ();
}
}
The above is my operation, the implementation of the way is relatively simple, I hope you have more guidance.