將生成的畫布圖像發送到網站服務器？

我處於定製杯電子商務網站的開發階段。我正在開發個性化功能，以便我的客戶可以設計自己的杯子。一切都完成了。我可以預覽，打印和導出畫布圖像，如下所示：https://metaldepot.americommerce.com/Designer/index.html 單擊導出按鈕時，可以生成圖像並將其下載到用戶計算機。但是，我希望生成畫布圖像並將其上傳到我的網站服務器。這裏是編碼我到目前爲止在我的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>

任何幫助將不勝感激，謝謝你的時間！

來源

2016-05-27 Chazz Decker

您可以獲取內容，並通過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或..任何你想要的。

來源

2016-05-27 14:49:42

將生成的畫布圖像發送到網站服務器？

回答

相關問題