Question

我有一个关于HTML5画布的查询，并且已经绘制了一个项目（在这种情况下是一个图形）之后添加额外绘图空间的可能性。

我的图表和它的标题占据整个画布，因为它使用库ChartJS（Ver 2.7.0）来生成它。但是我想在当前画布元素上绘制图形，在已经绘制的内容（实际上是页眉和页脚）的上方和下方添加说... 100px然后定义一个坐标模板，用于添加几个新的文本元素到帆布。准备出口到png。

当前导出功能：

 function exportWithFormatting($id) { 
    //get the charts variable name (stored as a data-attribute on the canvas element called chart-var)
    var chart_variable_name = $("#" + $id).data('chart-var');

    //convert this to a usable variable instead of a string
    var chart_variable = eval(chart_variable_name);

    //get canvas element using id passed in
    var ctx = $("#" + $id);

    //get data-export-title attribute (multiline title with Source, Title etc)
    var exportTitle = $(ctx).data('export-title');

    //get context
    context = ctx[0].getContext('2d');

    //get the old title from the ChartJS Object (ready to use for going back to old title)
    var old_title = chart_variable.options.title.text;
    chart_variable.options.title.text = "";

    // get the exportTitle as an array, this will allow for MultiLine titles on export
    arr = exportTitle.split(',');

    //push String "Title" + old_title variable so we have the title added at the end of the array
    arr.push(old_title);

    //set the charts title text to the new Multiline export title.
    chart_variable.options.title.text = arr;

    //run the update on the chart
    chart_variable.update(0);

    chart_variable = eval(chart_variable_name);

    //convert the chart to a base64 link PNG
    //var base64link = ($('#' + $id)[0]).toDataURL("image/png");

    var newBase64 = chart_variable.toBase64Image();
    //insert an <a> tag which is hidden, before the save button - irrelevant where it goes as it wont be seen but for consistency
    $("<a id='" + $id + "-button-temp' style='display:none;' class='button-style' href='" + newBase64 + "' download='" + $id + ".png' >Download</a>").insertAfter($('#' + $id + '-button'));

    chart_variable.options.title.text = "";

    //programmatically find and click the <a> tag to initiate the download of the image
    //($(document).find("#" + $id + "-button-temp")[0]).click();

    //programmatically remove the <a> tag so we dont clutter the page with unecessary HTML that is hidden
    //($(document).find("#" + $id + "-button-temp")[0]).remove();

    //set chart title back to previous title
    chart_variable.options.title.text = old_title;
}

Answer 1

通过将第一个画布保存为base64字符串来解决它，其宽度和高度有两个变量。在高度上添加了200px并创建了一个新的画布，其中.png是从base64创建的，并放置在新画布上，将y坐标偏移100px。

使用chartJS中内置的填充只会压缩我的图形高度，导致它难以辨认。

HTML5 Canvas在绘图后展开绘图区域

1 个答案: