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 プロット オブジェクト自体からキャンバスを取得することもできます。

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