Question

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

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

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

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

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

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

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

Answer 1

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

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

顺便说一下：

您必须在style元素中使用javascript 在页面加载后通过javascript设置宽度。
为什么在为flot插件加载jQuery时不使用jQuery？
您可以将$imgs = document.getElementById('imgs');简化为$imgs = $('#imgs');。
另外，使用{开始变量名称{1}}应仅用于jQuery对象，以避免jQuery对象与标准javascript / DOM对象之间的混淆。

Answer 2

您还可以从flot plot对象本身获取画布：

var somePlot = $.plot("#placeholder", [ [0,0],[10,10] ]);
somePlot.getCanvas()

使用canvas2image将FLOT图表保存到图像文件

2 个答案: