Как скачать изображение на div?

Question

Я добавляю div «chartdiv00» как изображение в div «imgChart1».

LoadImage = function(){ 
    var imgData = $('#chartdiv00').jqplotToImageStr({}); 
    var imgElem = $('<img/>').attr('src',imgData); 
    $('#imgChart1').append(imgElem); 
} 

то, что я хочу, чтобы загрузить изображение в Див «imgChart1» в качестве PNG или JPG с помощью кнопки. Как я мог это сделать? Могу ли я использовать атрибут загрузки в HTML5? Тогда какой URL-адрес моего изображения? Если я могу преобразовать изображение в dataURI, я могу его загрузить. Есть ли способ конвертировать этот вид изображения в dataURI?

Благодаря

Answer 1

Если вы печатаете изображение в canvas элемент, то вы можете использовать canvas.toDataURL(), чтобы получить base64 представление изображения.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

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

  var canvas = $('<canvas>')[0]; 
      var ctx = canvas.getContext('2d'); 

      ctx.fillStyle='#f00'; 
      ctx.fillRect(0,0, canvas.width,canvas.height); 

      var link = $('<a>').attr({ 
       href : canvas.toDataURL(), 
       download : 'imageName', 
       target : '_blank' 
      }).text('download link'); 

      $('#Content').append(link); 

PS. Имейте в виду, что, поскольку вы используете холст в качестве буфера для получения кода base64 изображения, на самом деле вам не нужно добавлять его в дерево DOM. Также jQuery не является существенным, одна и та же логика будет работать и в чистом JS.