我将“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?
谢谢
最佳答案
如果将图像打印到 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。
关于javascript - 如何在div上下载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20142641/