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>

我已经尝试过此代码，但它无效

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

    return false;
});

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

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

但我需要点击＆＃34; anotherButton＆＃34;并使相同的事情发生。怎么可能？

任何帮助？

Answer 1

检查我的JS小提琴 - JSFIDDLE

至少你会得到一个想法。您可以使用html2canvas来实现此目的。您需要添加以下脚本 -

脚本库

jQuery Library＆amp; 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内容。

使用jQuery

1 个答案: