如何在div上下载图像？

Question

我将“chartdiv00” div 作为图像附加到“imgChart1” div。

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

然后我想要通过单击按钮将“imgChart1”div 的图像下载为 png 或 jpg。我怎么能那样做？ 我可以在 HTML5 中使用下载属性吗？ 那么我的图片的网址是什么？ 如果我可以将图像转换为 dataURI，我想我可以下载它。有没有办法将这种图像转换为 dataURI ？

谢谢

Answer 1

如果将图像打印到canvas 元素中，则可以使用canvas.toDataURL() 来获取图像的base64 表示。

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

PS。请记住，由于您使用画布作为缓冲区来获取图像的 base64 代码，因此您实际上不必将其附加到 DOM 树中。 jQuery 也不是必需的，同样的逻辑也适用于纯 JS。