Сохранить изображение из html2canvas внутри папки

Question

Я создаю образ HTML <div>. Его рабочий тон и изображение передаются другому div, используя html2canvas.js.

Теперь я хочу дать ссылку, чтобы каждый мог загрузить изображение в папку внутри приложения.

Пример кода, который я использую:

//html whose image will be created. 
<div id="mydiv"> 
    <p>text!</p> 
    <h1>This is a test!!</h1> 
</div> 

//div where image will be rendered. 
<div id="image"> 
     <p>Image:</p> 
</div> 

//script to create image of html 

<script type="text/javascript" src="/js/html2canvas.js"></script> 
    <script type="text/javascript"> 
     html2canvas([document.getElementById('mydiv')], { 
      onrendered: function (canvas) { 

       var data = canvas.toDataURL('image/gif'); 
       var image = new Image(); 
       image.src = data; 
       document.getElementById('image').appendChild(image); 

      } 
     }); 
    </script> 

Просьба предложить.

Answer 1

Обычно это делается с использованием некоторых инструментов на стороне сервера, чтобы фактически хранить изображение где-то ... Без сохранения сгенерированного изображения в файловой системе сервера нет возможности использовать его (с использованием обычного URL-адреса) для обслуживания Это.

Поскольку вы используете атрибут SRC для хранения холста, вы можете использовать эту строку (обычно длинную и нечитаемую) в качестве URL-адреса, но не указывать на какой-либо сервер или домен. SRC изображения фактически является данными изображения, сохраненным непосредственно, а не хранится в файле.

Чтобы сделать это, получить получить SRC изображения и сделать точку ссылки на него:

//html whose image will be created. 
<div id="mydiv"> 
    <p>text!</p> 
    <h1>This is a test!!</h1> 
</div> 

//div where image will be rendered. 
<div id="image"> 
     <p>Image:</p> 
</div> 
<a href="#" id="image_link">Link to image</a> 

//script to create image of html 

<script type="text/javascript" src="/js/html2canvas.js"></script> 
<script type="text/javascript"> 
    html2canvas([document.getElementById('mydiv')], { 
     onrendered: function (canvas) { 

      var data = canvas.toDataURL('image/gif'); 
      var image = new Image(); 
      image.src = data; 
      document.getElementById('image').appendChild(image); 
      document.getElementById('image_link').href = data; //Here 

     } 
    }); 
</script>