H5單檔案壓縮外掛程式

單檔案壓縮上傳

<

input 
type
="file"
id="file"
>

建構函式

function

upfileimg(options)
};var that = this
;    
//讀取檔案
this.setfilesreader = function
(file);
};//壓縮檔案
this.compress = function
(res, filesize)
cvs.width =img.width;
cvs.height =img.height;
ctx.clearrect(0, 0, cvs.width, cvs.height);
ctx.drawimage(img, 0, 0, img.width, img.height);
//設定壓縮比
var compressrate = that.getcompressrate(1,filesize);
//壓縮
var dataurl = cvs.todataurl('image/jpeg', compressrate);
if(options.datatype === 'blob')
//成功後**
that.compresscallblak(options.success,dataurl);
};};
//壓縮後**函式
this.compresscallblak = function
(fun,val);
//計算壓縮比
this.getcompressrate = function
(allowmaxsize,filesize) 
else
if(filesize/allowmaxsize >3) 
else
if(filesize/allowmaxsize >2) 
else
if(filesize >allowmaxsize) 
else
return
compressrate;
};//base64轉blob
this.datauritoblob = function
(base64data)
else
var mimestring = base64data.split(',')[0].split(':')[1].split(';')[0];
var ia = new
uint8array(bytestring.length);
for (var i = 0; i < bytestring.length; i++) 
return
newblob([ia], );
}document.getelementbyid(options.el).onchange = function
();};

示例：**為blob物件後使用ajax上傳）

var fileimg = new

upfileimg(
});}
});

名稱

預設值

是否必傳

描述el無

是對應input的id

compresssize

640否

壓縮後最大寬度

datatype

base64

否**函式返回值型別，預設返回base64，可以設定為blob，配合ajax進行上傳

success無是

**函式返回檔名稱，與壓縮後檔案（base64或者blob）

H5 上傳檔案

input 標籤 type file 時 定義支援上傳的檔案型別 設定accept 支援的型別參考這裡 效果 點選選擇檔案，彈出選擇檔案的彈框，被允許的型別可以選擇，未被accept的型別是灰色，不可選。坑 input 為file cursor pointer 無效 上傳檔案樣式太醜。整容樣式如下。...

h5檔案初識

h5檔案中有兩個核心的概念 組 group 和資料集 dataset 乙個h5檔案就是 dataset 和 group 二合一的容器。dataset 簡單來講類似陣列組織形式的資料集合，像 numpy 陣列一樣工作，乙個dataset即乙個numpy.ndarray np.array只是乙個便捷的函...

h5放大縮小，滑動檔案

用hammer.js放大縮小 加上以下 可以滑動。不然設定掛載縮放事件後滑動不了 let hand new hammer node,蘋果要插入以下 避免第二部加入touchaction後造成的問題 document.addeventlistener gesturestart function eve...