前々回 、 前回 につくったモックに画像生成機能をつけてみました。
openボタンを押すと、png画像を別タブで開きます。
JavaScript
(function(win, doc, $) { "use strict"; win.app = {}; })(this, document, $); (function(win, doc, $, ns) { "use strict"; function Preview(canvas, video) { var $video = $(video), ctx = canvas.getContext("2d"); _init(); function _init() { canvas.style.display = "none"; } function _adjustSize() { canvas.width = video.videoWidth; canvas.height = video.videoHeight; } function capture() { _adjustSize(); canvas.style.display = "block"; video.style.display = "none"; ctx.drawImage(video, 0, 0); } // 追加 function buildImage() { var base64 = canvas.toDataURL('image/png'); win.open(base64); } return { capture: capture, buildImage: buildImage }; } ns.Preview = Preview; })(this, document, $, app); (function(win, doc, $, ns) { "use strict"; init(); function init() { $(".start").on("click", useCamera).trigger("click"); } function useCamera() { navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); if (navigator.getUserMedia) { navigator.getUserMedia ({video: true, audio: false}, handleSuccess, handleError); } } function handleSuccess(localMediaStream) { var video = doc.querySelector("video"), canvas = doc.querySelector("canvas"), isCapture = false, preview; video.style.display = "block"; video.src = window.URL.createObjectURL(localMediaStream); video.play(); preview = new ns.Preview(canvas, video); $(".stop").on("click", function() { localMediaStream.stop(); }); $(".capture").on("click", function() { preview.capture(); isCapture = true; }); // 追加 $(".open").on("click", function() { if (!isCapture) { $(".capture").trigger("click"); } preview.buildImage(); }); } function handleError(evt) { console.log(evt); } })(this, document, $, app);