app.post('/upload', function(req, res){
//接收前台POST过来的base64
var imgData = req.body.imgData
//过滤data:URL
var base64Data = imgData.replace(/^data:image\/\w+base64,/, "")
var dataBuffer = new Buffer(base64Data, 'base64')
fs.writeFile("image.png", dataBuffer, function(err) {
if(err){
res.send(err)
}else{
res.send("保存成功！")
}
})
})
File Upload组件啊，是同步还是异步呢html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯* 其他参数同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ) },
error:function( err ) {
console.info( err )
},
buttonText : '选择文件',chunked:true,// 分片大小
chunkSize:512 * 1024,//最大上传的文件数量, 总文件大小,单个文件大小(单位字节)
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}})
</script>
<html><meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
<script>
window.onload = function() {
draw()
var saveButton = document.getElementById("saveImageBtn")
bindButtonEvent(saveButton, "click", saveImageInfo)
var dlButton = document.getElementById("downloadImageBtn")
bindButtonEvent(dlButton, "click", saveAsLocalImage)
}
function draw(){
var canvas = document.getElementById("thecanvas")
var ctx = canvas.getContext("2d")
ctx.fillStyle = "rgba(125, 46, 138, 0.5)"
ctx.fillRect(25,25,100,100)
ctx.fillStyle = "rgba( 0, 146, 38, 0.5)"
ctx.fillRect(58, 74, 125, 100)
ctx.fillStyle = "rgba( 0, 0, 0, 1)" // black color
ctx.fillText("Gloomyfish - Demo", 50, 50)
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false)
} else {
element.attachEvent('on'+type, handler)
}
}
function saveImageInfo ()
{
var mycanvas = document.getElementById("thecanvas")
var image = mycanvas.toDataURL("image/png")
var w=window.open('about:blank','image from canvas')
w.document.write("<img src='"+image+"' alt='from canvas'/>")
}
function saveAsLocalImage () {
var myCanvas = document.getElementById("thecanvas")
// here is the most important part because if you dont replace you will get a DOM 18 exception.
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-streamContent-Disposition: attachmentfilename=foobar.png")
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream")
window.location.href=image // it will save locally
}
</script>
</head>
<body bgcolor="#E6E6FA">
<div>
<canvas width=200 height=200 id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>
</div>
</body>
</html>
好像这个可以 不错 你试一试吧 把下载下来的文件 重命名 为 图片格式 就可以预览啦
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）