Question

我正在使用fabricjs，需要将包含画布的生成的图像发送到我的nodejs服务器。我正在使用Axios发送生成的图像，但是它不起作用。

<table id="tbl1">
    <thead>
        <tr hidden="" style="height:100px"> <th colspan="8"></th></tr>
        <tr><td colspan="3" style="text-align:center">Test 1</td></tr>
        <tr><td colspan="2">Test 1</td><td colspan="2">10.00</td></tr>
        <tr><td colspan="2">Test 1</td><td colspan="2">100.00</td></tr>
    </thead>
    <tbody>
        <tr><td>Test 1</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="8" style="background-color:#014f7c; align-content:center; vertical-align:middle;"> Test 1 </td></tr>
    </tfoot>
</table>

<table id="tbl2">
    <thead>
        <tr hidden="" style="height:100px"> <th colspan="8"></th></tr>
        <tr><td colspan="3" style="text-align:center">Test 2</td></tr>
        <tr><td colspan="2">Test 2</td><td colspan="2">20.00</td></tr>
        <tr><td colspan="2">Test 2</td><td colspan="2">200.00</td></tr>
    </thead>
    <tbody>
        <tr><td>Test 2</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="8" style="background-color:#014f7c; align-content:center; vertical-align:middle;"> Test 2 </td></tr>
    </tfoot>
</table>

<button onclick="myFunction(['tbl1','tbl2'])">Export to Multiple Excel Sheets</button>
<script type="text/javascript">
    function myFunction(tables) {
        var uri = 'data:application/vnd.ms-excel;base64,',
        template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
        base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); },
        format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };

        var worksheetsData = "";

        for (var i = 0; i < tables.length; i++) {
            var table = document.getElementById(tables[i]);

            var dataValue = table.outerHTML;

            ctx = { worksheet: 'sheet' + i, table: dataValue };
            worksheetsData += format(template, ctx);
        }

        var link = document.createElement("A");
        link.href = uri + base64(worksheetsData);
        link.download = 'ExportData' || 'Workbook.xls';
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>

这是服务器代码：

const canvas = new fabric.Canvas('c');
const textInput = document.getElementById('text');

textInput.addEventListener('keyup', (event) => {

    let newText = event.target.value;
    let text = new fabric.Text(newText, { left: 100, top: 100 });

    canvas.add(text);
});


const sendPNG = () => {
    var dataURL = canvas.toDataURL({
        format: 'png',
        left: 100,
        top: 100,
        width: 200,
        height: 200
      });

    console.log("image", dataURL);
    axios.post('http://localhost:5000/upload', dataURL)
        .then(res => { console.log("Test res:", res) })
}

如何将图像画布发送到服务器？

0 个答案: