在 HTML5 和 Javascript 中绘制图像答案

【问题标题】：Draw Image in HTML5 and Javascript在 HTML5 和 Javascript 中绘制图像
【发布时间】：2013-12-09 19:33:54
【问题描述】：

我的代码在这里

 <video id="video" width="640" height="480" autoplay></video>
  <button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

  <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);
      }

      // Trigger photo take
      document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
      });
    }, false);

  </script>

我的代码工作正常，但我怎样才能得到网址（我的意思是我怎样才能永久保存这个）

请帮助我，我是 HTML5 新手

【问题讨论】：

看一下canvas元素的toDataURL方法：html5canvastutorials.com/advanced/…

标签： javascript html

【解决方案1】：

添加一个图像标签并在你的 snap 方法中尝试以下内容：

<img id="canvasImg"><img>

document.getElementById('canvasImg').src = canvas.toDataURL();

您应该能够右键单击并保存图像。

编辑：这是一个类似的线程：how to save canvas data to file

【讨论】：