javascript - 如何在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 中使用下载属性吗？那么我的图片的URL是什么？如果我可以将图像转换为 dataURI，我认为我可以下载它。有没有办法将这种图像转换为 dataURI？

谢谢

Answer 1

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

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

编辑:这是一种快速而肮脏的方式，如何获取 Canvas 作为图像的下载链接。

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

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