0

我正在尝试将FLOT图表保存为图像。该图表当前在 div 元素中正确显示，如下所示：

<div id="flotcontainer"></div>

我用来保存图像的工具是canvas2image。这个小型库可让您轻松地将 HTML5 画布元素保存为图像文件。此代码在我的页面上运行，我可以注释然后保存画布元素：

<canvas width="100" height="100" id="cvs"></canvas>

我遇到的问题是canvas2image代码需要一个canvas元素，但我的 FLOT 图表显示在普通div元素中。我需要做什么才能传递包含我的 FLOT 图表的 div，而不是要保存的画布元素？谢谢。

这是我正在处理的完整代码：

<style type="text/css">
#flotcontainer {
width: document.getElementById('flot_widget').offsetWidth;
height: 300px;
text-align: center;
margin: 0 auto;
}
canvas {
display: block;
border: 2px solid #888;
}
</style>

<div id="flotcontainer" style="display:none;" ></div>    

<div class="g12">
<canvas width="100" height="100" id="cvs"></canvas>

<div>
    <p>
        <button id="save">save</button> or <button id="convert">convert to</button> as: 
        <select id="sel">
            <option value="png">png</option>
            <option value="jpeg">jpeg</option>
            <option value="bmp">bmp</option>
        </select><br/>
        w : <input type="number" value="300" id="imgW" /> h : <input type="number" value="200" id="imgH" />
    </p>
</div>
<div id="imgs">        
</div>
</div>
<script>
var canvas, ctx, bMouseIsDown = false, iLastX, iLastY,
    $save, $imgs,
    $convert, $imgW, $imgH,
    $sel;
function init () {

    canvas = document.getElementById('cvs');
    ctx = canvas.getContext('2d');

    $save = document.getElementById('save');
    $convert = document.getElementById('convert');
    $sel = document.getElementById('sel');

    $imgs = document.getElementById('imgs');
    $imgW = document.getElementById('imgW');
    $imgH = document.getElementById('imgH');
    bind();
    draw();
}
function bind () {
    canvas.onmousedown = function(e) {
        bMouseIsDown = true;
        iLastX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
        iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
    }
    canvas.onmouseup = function() {
        bMouseIsDown = false;
        iLastX = -1;
        iLastY = -1;
    }
    canvas.onmousemove = function(e) {
        if (bMouseIsDown) {
            var iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
            var iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
            ctx.moveTo(iLastX, iLastY);
            ctx.lineTo(iX, iY);
            ctx.stroke();
            iLastX = iX;
            iLastY = iY;
        }
    };      

    $save.onclick = function (e) {
        var type = $sel.value,
            w = $imgW.value,
            h = $imgH.value;
        Canvas2Image.saveAsImage(canvas, w, h, type);
    }

    $convert.onclick = function (e) {
        var type = $sel.value,
            w = $imgW.value,
            h = $imgH.value;
        $imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type))
    }        
}

function draw () {
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, 600, 400);
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
}    

onload = init;
</script>
4

2 回答 2

1

要获取 Flot 图表的画布，请使用

$canvas = $('#flotcontainer').find('canvas.base');

顺便一提：

  • 您不能在style元素内使用 javascript，您必须在页面加载后通过 javascript 设置宽度。
  • 当您必须为 flot 插件加载 jQuery 时，为什么不使用它？
    你可以简化$imgs = document.getElementById('imgs');为$imgs = $('#imgs');.
    此外，以 开头的变量名$应该只用于 jQuery 对象，以避免 jQuery 对象和标准 javascript / DOM 对象之间的混淆。
于 2013-09-30T09:09:06.293 回答
1

您还可以从浮点图对象本身获取画布：

var somePlot = $.plot("#placeholder", [ [0,0],[10,10] ]);
somePlot.getCanvas()
于 2013-09-30T14:40:07.683 回答