div에서 이미지를 다운로드하는 방법은 무엇입니까?

Question

"imgChart1"div에 "chartdiv00"div를 이미지로 추가합니다.

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

그러면 내가 원하는 것은 버튼 클릭으로 "imgChart1"div 이미지를 png 또는 jpg로 다운로드하는 것입니다. 내가 어떻게 할 수 있니?HTML5에서 다운로드 속성을 사용할 수 있습니까? 그런 다음 내 이미지의 URL은 무엇입니까? 내가 이미지를 데이터로 변환 할 수 있다면 나는 그것을 생각할 수있다. 이런 종류의 이미지를 dataURI로 변환 할 수있는 방법이 있습니까?

감사

Answer 1

당신이 canvas 요소로 이미지를 인쇄 할 경우, 당신은 이미지의 base64로 표현을 얻을 수있는 canvas.toDataURL()를 사용할 수 있습니다.

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

편집 : 다음은 이미지와 캔버스의 다운로드 링크를 얻을 수있는 방법을 신속하고 더러운 방법입니다.

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

추신. 캔버스를 버퍼로 사용하여 이미지의 base64 코드를 얻으므로 실제로 DOM 트리에 이미지를 추가 할 필요가 없습니다. 또한 jQuery는 필수적인 것은 아니며 동일한 논리가 순수 JS에서도 작동합니다.