Question

我需要一些帮助：

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

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

我在互联网上寻找解决方案，但没有遇到对我有用的东西..而且我也很喜欢html画布。任何kiond的帮助将非常感激！

代码：

<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>

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

0 个答案: