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中使用download属性吗？然后我的图像的URL是什么？如果我可以将图像转换为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。

如何在div上下载图像？

1 个答案: