jqPlot to Image
我知道这个问题已经存在，但我认为这个问题没有得到妥善回答。 到目前为止，我正在使用这种方法100％罚款，对于任何我不得不远的情节。
请评论代码的效率等，我想知道是否还有错误。
非常感谢你。
function jqplotToImg(obj) { var newCanvas = document.createElement("canvas"); newCanvas.width = obj.find("canvas.jqplot-base-canvas").width(); newCanvas.height = obj.find("canvas.jqplot-base-canvas").height()+10; var baseOffset = obj.find("canvas.jqplot-base-canvas").offset(); // make white background for pasting var context = newCanvas.getContext("2d"); context.fillStyle = "rgba(255,255,255,1)"; context.fillRect(0, 0, newCanvas.width, newCanvas.height); obj.children().each(function () { // for the div's with the X and Y axis if ($(this)[0].tagName.toLowerCase() == 'div') { // X axis is built with canvas $(this).children("canvas").each(function() { var offset = $(this).offset(); newCanvas.getContext("2d").drawImage(this, offset.left - baseOffset.left, offset.top - baseOffset.top ); }); // Y axis got div inside, so we get the text and draw it on the canvas $(this).children("div").each(function() { var offset = $(this).offset(); var context = newCanvas.getContext("2d"); context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family'); context.fillStyle = $(this).css('color'); context.fillText($(this).text(), offset.left - baseOffset.left, offset.top - baseOffset.top + $(this).height() ); }); } else if($(this)[0].tagName.toLowerCase() == 'canvas') { // all other canvas from the chart var offset = $(this).offset(); newCanvas.getContext("2d").drawImage(this, offset.left - baseOffset.left, offset.top - baseOffset.top ); } }); // add the point labels obj.children(".jqplot-point-label").each(function() { var offset = $(this).offset(); var context = newCanvas.getContext("2d"); context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family'); context.fillStyle = $(this).css('color'); context.fillText($(this).text(), offset.left - baseOffset.left, offset.top - baseOffset.top + $(this).height()*3/4 ); }); // add the title obj.children("div.jqplot-title").each(function() { var offset = $(this).offset(); var context = newCanvas.getContext("2d"); context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family'); context.textAlign = $(this).css('text-align'); context.fillStyle = $(this).css('color'); context.fillText($(this).text(), newCanvas.width / 2, offset.top - baseOffset.top + $(this).height() ); }); // add the legend obj.children("table.jqplot-table-legend").each(function() { var offset = $(this).offset(); var context = newCanvas.getContext("2d"); context.strokeStyle = $(this).css('border-top-color'); context.strokeRect( offset.left - baseOffset.left, offset.top - baseOffset.top, $(this).width(),$(this).height() ); context.fillStyle = $(this).css('background-color'); context.fillRect( offset.left - baseOffset.left, offset.top - baseOffset.top, $(this).width(),$(this).height() ); }); // add the rectangles obj.find("div.jqplot-table-legend-swatch").each(function() { var offset = $(this).offset(); var context = newCanvas.getContext("2d"); context.fillStyle = $(this).css('background-color'); context.fillRect( offset.left - baseOffset.left, offset.top - baseOffset.top, $(this).parent().width(),$(this).parent().height() ); }); obj.find("td.jqplot-table-legend").each(function() { var offset = $(this).offset(); var context = newCanvas.getContext("2d"); context.font = $(this).css('font-style') + " " + $(this).css('font-size') + " " + $(this).css('font-family'); context.fillStyle = $(this).css('color'); context.textAlign = $(this).css('text-align'); context.textBaseline = $(this).css('vertical-align'); context.fillText($(this).text(), offset.left - baseOffset.left, offset.top - baseOffset.top + $(this).height()/2 + parseInt($(this).css('padding-top').replace('px','')) ); }); // convert the image to base64 format return newCanvas.toDataURL("image/png"); } 这不是错误，但如果您尝试将图像保存为png，它会为图像生成透明背景。 由您来处理背景图像。
首先感谢分享，基于我的测试，它缺少这个脚本：
- 某些类型图表的数据点标签（甜甜圈）
- 传奇样本丢失了。
现在有这个选项： https ： //bitbucket.org/cleonello/jqplot/src/538695e6a66a/src/jqplot.toImage.js？at = default
请在此处使用我的图表查看测试