Загрузка файла одним кликом, используя jQuery

Question

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

Я попытался это

function download() { 
    var c = document.getElementById('myCanvas'); 
    var ctx = c.getContext('2d'); 
    var img = document.getElementById('bg'); 
    var imgLogo = document.getElementById('logo'); 
    ctx.drawImage(img, 0, 0, 160, 600); 
    ctx.drawImage(imgLogo, 30, 100, 86, 86); 

    var imgData = ctx.getImageData(0, 0, c.width, c.height); 
    ctx.putImageData(imgData, 0, 0); 

    var data = c.toDataURL('images/jpeg');; 
    this.href = data; 
} 

Скрытое кнопка:

<a id="downloadButton" class="btn btn-info" download="name.jpeg" style="display:none;">Hidden Button</a> 

Мне нужно, чтобы загрузить изображение на другую кнопку мыши, как кнопка ниже

<a id="anotherButton" class="btn btn-info">Download as image</a> 

I 'Пробовал этот код, но он не работает

$('.download-img').on('click', function(e){ 
    e.preventDefault(); 
    download(); 

    return false; 
}); 

Для одной кнопки этот код работает отлично с этим кодом

downloadButton.addEventListener('click', download, false); 

Но мне нужно нажать на «anotherButton» и делают одни и те же вещи. Как это возможно?

Любая помощь?

Answer 1

Проверьте мой JS Fiddle- JSFIDDLE

Вы получите представление о том, по крайней мере. Для этого вы можете использовать html2canvas. Вам необходимо добавить следующие сценарии -

Сценарии библиотеки

Jquery библиотека & html2canvas.js

HTML

<span id="contentbox"> 
    <div class="header"> 
     <div class="title ng-binding">Samrat Khan</div> 
    </div> 
</span> 
<br/> 
<input type="button" id="btnSave" value="Save PNG"/> 

<div id="outputaspng"></div> 

Сценарии

$(function() { 
    $("#btnSave").click(function() { 
     html2canvas($("#contentbox"), { 
      onrendered: function(canvas) { 
       theCanvas = canvas; 
       document.body.appendChild(canvas); 

       // Convert and download as image 
       Canvas2Image.saveAsPNG(canvas); 
       $("#outputaspng").append(canvas); 
       // Clean up 
       //document.body.removeChild(canvas); 
      } 
     }); 
    }); 
}); 

html2canvas плагин имеет некоторые ограничения, не избегают читать, что

Ограничения Все изображения, используемые сценарий должны находиться под тем же происхождения для того, чтобы иметь возможность читать их без помощи прокси. Аналогичным образом, если на странице есть другие элементы холста, которые были испорчены кросс-контентом, они станут грязными и не будут читаться html2canvas.

Сценарий не отображает содержимое плагина, такое как Flash или Java-апплеты. Он также не отображает содержимое iframe.