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

Question

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

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

我用来保存图像的工具是 canvas2image 。这个小型库可让您轻松地将 HTML5 Canvas 元素保存为图像文件。此代码正在我的页面上运行，我可以注释然后保存 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 ，请使用

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

顺便说一下:

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