将 HTML 画布保存到图像将无法正常工作

Question

我需要一些帮助：

我正在尝试从我的 html 画布中保存图像。我确实让它工作了，但是当我点击“保存”按钮时，我只得到了我生成的彩色背景。我在画布中使用图像（png 图像），当我尝试将画布保存到文件时，它们似乎消失了。

奇怪的是：当我右键单击并选择“保存图像”时，它似乎工作正常！我应该在我的编码中保留一些东西，还是这不可能？

我在互联网上寻找解决方案，但没有找到适合我的解决方案。我对 html 画布也很陌生。任何帮助将不胜感激！

代码：

<style>
  #buttonRows{width:100%; height:200px;float:left;background-color:#666;}
  #buttonRow_01{width:100%; height:40px; border-top:1px solid #333; float:left;margin-top:10px;}
  #buttonRow_02{width:100%; height:40px; border-top:1px solid #333; float:left;margin-top:10px;}
  #label{padding:10px;float:left;height:50px;}
  #button{width:300px;height:50px; background-color:#CCC;border:none;cursor:pointer;}
  #img_container{ width:500px; margin:20px; border:5px solid #000;}
  #img_container img{ width:100%;height:auto}
</style>

<div id="buttonRows">
  <input id="button" type="button" value="Update button" onclick="refresh();" />
  <div id="buttonRow_01">
    <div id="label">Achtergrondkleur:</div>
    <input type="textbox" value="FF0000" id="colorInput" class="color" onchange="refresh();"/>
  </div>

  <div id="buttonRow_02">
    <div id="label">Laag 1:</div>
    <input type="range" value="50" id="opacitySlider"/>
    <select id="blendSelect" >
      <option value="screen">screen</option>
      <option value="multiply">multiply</option>
      <option value="source-over">none</option>
    </select>
    <select id="verbandSelect" >
      <option value="bs_standaart_cropped.png">standaart</option>
      <option value="bs_wild_cropped.png">wild</option>
    </select>
  </div>

</div>

 <canvas id="myCanvas" width="1280" height="720" ></canvas>
<img id="canvasImg" src="" />

 <script>
   function refresh(){  
     var canvas = document.getElementById('myCanvas');
     var context = canvas.getContext('2d');
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.globalAlpha = 1;
     context.globalCompositeOperation = "source-over";

     var CI = document.getElementById('colorInput');

     var OS = document.getElementById('opacitySlider');
     var BS = document.getElementById('blendSelect');
     var VS = document.getElementById('verbandSelect');

      // draw blue rectangle
      context.beginPath();
      context.rect(0, 0, 1280, 720);
      context.fillStyle = '#' + CI.value;
      context.fill();

     // draw transparent red circle
      context.globalAlpha = OS.value/100;
      context.globalCompositeOperation = BS.value;
      var image = new Image();
      image.src =  "http://www.joey-cooijmans.nl/templates/JC-main/images/steenconf/" + VS.value;
      image.fillStyle="#00ff00";
      context.drawImage(image, 0, 0, canvas.width, canvas.height);


   }

   refresh();

</script>

Answer 1

canvas.toDataURL('image/png') 将画布转换为 base64 字符串，然后设置下载按钮的href 并使用download 属性进行文件下载。请注意，并非所有browsers 都支持download 属性，因此文件将在新选项卡中打开，_blank 作为后备。

HTML

<a href id="save" download="canvas.png" target="_blank">save</a>

JavaScript

var saveButton = document.getElementById('save');
save.onclick = function(e) {
   var dataUrl = canvas.toDataURL('image/png');
   save.href = dataUrl;
};

http://jsfiddle.net/moogs/6z2fx7xc/2/