javascript - 将生成的 Canvas 图像发送到网站服务器？

Question

我正处于定制杯子电子商务网站的开发阶段。我正在研究个性化功能，以便我的客户可以设计自己的杯子。一切都快结束了。我可以预览、打印和导出 Canvas 图像，如下所示:https://metaldepot.americommerce.com/Designer/index.html 单击导出按钮时，可以生成图像并将其下载到用户计算机。但是，我希望生成 Canvas 图像并将其上传到我的网站服务器。这是我目前在 index.html 文件和 app.js 文件中为导出按钮编写的代码

app.js:

  // export as DESIGN

  $('.export').click(function(){
    //hide options
    $('#printable').find('i').css('display', 'none');
    $('#printable').find('.ui-icon').css('display', 'none');
    //get printable section
    var exportCanvas = document.getElementById('printable');
    //get convas container
    var canvasContainer = document.getElementById('convascontent');
    //export canvas to convascontainer
    html2canvas(exportCanvas, {
      //when finished fucntion
      onrendered: function(canvas) {
        // initialize canvas container (if we generate another canvas)
        $('#convascontent').html(' ');
        // append canvas to container
        canvasContainer.appendChild(canvas);
        //add id attribute to the canvas
        $('#convascontent').find('canvas').attr('id','mycanvas');
        // display options again
        $('#printable').find('i').css('display', 'block');
        $('#printable').find('.ui-icon').css('display', 'block');
        //document.getElementsByTagName("UL")

      }
    });
    // return false;
  });

  //export options
  $('.exportas').click(function(){
    // get type to export
    var to = $(this).data('type');
    // alert(to);
    // get our canvas
    var oCanvas = document.getElementById("mycanvas");  
    // support variable
    var bRes = false;
    if(to == 'png'){
      // export to png 
      bRes = Canvas2Image.saveAsPNG(oCanvas);
    }
    if(to == 'jpg'){
      // maybe in some old browsers it works only on Firefox
      bRes = Canvas2Image.saveAsJPEG(oCanvas);
    }if(to == 'bmp'){
      Res = Canvas2Image.saveAsBMP(oCanvas);
    }
    // if browser doesn't support mimetype alert user
    if (!bRes) {
      alert("Sorry, this browser is not capable of saving " + strType + " files!");
      return false;
    }
  });

index.html

 <!-- export option (png, jpg, bmp) -->
            <li>
              <div class="btn-group dropup">
                <a class="dropdown-toggle export btn" data-toggle="dropdown" href="#">
                  Export
                  <span class="caret"></span>
                </a>

                <ul class="dropdown-menu">
                  <li>
                    <a href="#" class="exportas" data-type='png'>PNG</a>
                    <a href="#" class="exportas" data-type='jpg'>JPG</a>
                    <a href="#" class="exportas" data-type='bmp'>BMP</a>

如有任何帮助，我们将不胜感激，感谢您抽出宝贵时间!

Answer 1

您可以获取内容，并通过ajax发送到服务器。

  $('.save').click(function(){
    // get our canvas
    var oCanvas = document.getElementById("mycanvas");  
    var data = oCanvas.toDataURL(); // default png
    // var data = oCanvas.toDataURL('image/jpeg'); // for jpg 

    $.post('/url_to_upload', { customer : 'id', data : data });
  });

现在，服务器端 - 发布的变量包含如下数据

"data:image/png;base64,/9j/4AAQS....."

用第一个逗号 ',' 分隔，并解码 base64。然后保存到 DB 或 FS 或..任何你想要的地方。