![](/img/trans.png)
[英]Sending the contents of a canvas to a Java server and saving it as an image
[英]Sending generated canvas image to website server?
我正处于定制杯电子商务网站的开发阶段。 我正在开发个性化功能,以便我的客户设计自己的杯子。 一切都快完成了。 我可以预览,打印和导出画布图像,如下所示: 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>
任何帮助将不胜感激,谢谢您的时间!
您可以获得内容,并通过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 });
});
现在,服务器端-发布的vars包含如下数据
"data:image/png;base64,/9j/4AAQS....."
用第一个逗号','分割并解码base64。 然后保存到DB或FS或您想要的任何位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.