javascript - 使用 jQuery 一键下载文件

Question

我需要通过单击链接或按钮来下载图像文件，该链接或按钮是根据最终用户的给定内容动态绘制的。图像由 HTML5 Canvas 绘制。

我已经尝试过了

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>

我已经尝试过这段代码，但它不起作用

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

    return false;
});

对于单个按钮，此代码可以正常使用此代码

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

但我需要点击“另一个按钮”并让同样的事情发生。这怎么可能？

有什么帮助吗？

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 插件有一些限制，请不要避免阅读

限制脚本使用的所有图像都需要驻留在同一源下，以便能够在没有代理帮助的情况下读取它们。同样，如果页面上有其他 Canvas 元素，这些元素已被跨域内容污染，它们将变得肮脏并且不再被 html2canvas 读取。

该脚本不会呈现插件内容，例如 Flash 或 Java 小程序。它也不渲染 iframe 内容。