資訊專欄INFORMATION COLUMN
摘要：使用了以后，圖片上傳可以由服務(wù)器來完成，保存后的圖片地址再傳給后臺進行保存。圖片的上傳使用的插件表單上傳生成通用識別碼代碼該游覽器暫不支持文件上傳代碼上傳失敗文件不要超過上傳成功圖片的裁切使用的插件圖片處理圖像裁剪插件
圖片的上傳 使用的插件使用了node以后，圖片上傳可以由node服務(wù)器來完成，保存后的圖片地址再傳給后臺進行保存。簡單的文件操作切割，壓縮什么的也可以交給node服務(wù)器完成。
formidable: form 表單上傳
uuid: 生成通用識別碼
function fileUpload(input,callback){
if(typeof(Worker) !== "undefined"){
var data = new FormData();
data.append("file",$(input)[0].files[0]);
$.ajax({
url : "/fileUpload",
type : "POST",
data : data,
processData: false,
contentType: false,
success : function(ret){
callback(ret);
},
error : function(ret){
callback(ret);
}
})
}else{
alert("該游覽器暫不支持文件上傳");
return
}
}
node代碼
app.route("/fileUpload")
.post(function(req, res, next) {
var form = new formidable.IncomingForm();
form.parse(req,function(err,fields,files){
if(err || !files.file){
res.jsonp({
succeed : false,
status : 400,
errMsg : "上傳失敗"
})
return
}
if (files.file.size > 16*1024*1024){
res.jsonp({
succeed : false,
status : 402,
errMsg : "文件不要超過16Mb"
})
return
}
var old_path = files.file.path,
fileReadStream = fs.createReadStream(old_path);
var name = uuid.v1(),
tt = name.split("-")[0],
f1 = tt.slice(0, 2),
f2 = tt.slice(2, 4),
f3 = tt.slice(4, 6),
f4 = tt.slice(6, 8),
a1 = "/../public/uploads/upFile/" + f1 + "/" + f2 + "/" + f3 + "/" + f4,
a2 = "/" + files.file.name,
folder = __dirname + a1,
new_path = folder + a2,
visit = "/uploads/upFile/" + f1 + "/" + f2 + "/" + f3 + "/" + f4 + a2;
mkdirs(folder, function(bbb) {
var fileWriteStream = fs.createWriteStream(new_path);
fileReadStream.pipe(fileWriteStream);
var src = path.normalize(visit),
reg = //g,
out = src.replace(reg, "/");
res.jsonp({
succeed: true,
distinctImg: out,
errMsg: "上傳成功"
})
})
})
})
圖片的裁切
使用的插件
gm: 圖片node處理
jcrop: 圖像裁剪jquery插件
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78776.html
摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。 最近在重新做過去常做的翻頁H5，關(guān)于背景圖有些新的經(jīng)驗心得分享。 翻頁H5的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在...
摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在背景圖上的處理相當(dāng)要注意。設(shè)置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。 最近在重新做過去常做的翻頁H5，關(guān)于背景圖有些新的經(jīng)驗心得分享。 翻頁H5的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統(tǒng)一，這導(dǎo)致在...
摘要：版本裁切工具，包含預(yù)覽功能最終效果源碼地址第一步先用安裝腳手架不會安裝的看官網(wǎng)初始化第二步創(chuàng)建文件新建里新建，在配置訪問路由具體看源碼最終生成的文件結(jié)構(gòu)如下圖第三步注冊組件引用所有插件導(dǎo)入插件入口文件如果已安裝就跳過注冊插件全 vue版本裁切工具，包含預(yù)覽功能 最終效果： https://qiuyaofan.github.io/vue-crop-demo/ 源碼地址： https:/...
Python語言的表達照片處理使人們常常所使用的層面,那樣我們應(yīng)該怎么實現(xiàn)圖片的裁切呢?接下來本文關(guān)鍵為大家介紹了關(guān)于用python圖片剪裁的資料,原文中根據(jù)案例編碼推薦的十分詳盡,必須的小伙伴可以借鑒一下 怎么使用python圖片剪裁 以上如圖所示，這也是1張包括了各種象棋棋子的照片。我們應(yīng)該將在其中每個棋盤都裁切出去，這時可以借助python的PIL庫成功?！ ∫弧⒔M裝PIL庫 假如...
閱讀 930·2021-11-23 09:51
閱讀 993·2021-11-18 10:02
閱讀 1911·2021-09-10 11:27
閱讀 3140·2021-09-10 10:51
閱讀 779·2019-08-29 15:13
閱讀 2064·2019-08-29 11:32
閱讀 2502·2019-08-29 11:25
閱讀 3045·2019-08-26 11:46
