資訊專(zhuān)欄INFORMATION COLUMN
摘要：今天在做圖片上傳的小功能，使用了一個(gè)上傳組件。很好奇它是如何在圖片上傳前，檢測(cè)到圖片的大小和尺寸的我們來(lái)寫(xiě)個(gè)小實(shí)例實(shí)現(xiàn)一下吧如何讀取圖片的首先，原生控件有個(gè)屬性，該屬性是一個(gè)數(shù)組。
今天在做圖片上傳的小功能，使用了一個(gè)kissy上傳組件。很好奇它是如何在圖片上傳前，檢測(cè)到圖片的大小和尺寸的？我們來(lái)寫(xiě)個(gè)小實(shí)例實(shí)現(xiàn)一下吧
如何讀取圖片的size
首先，原生input file控件有個(gè)files屬性，該屬性是一個(gè)數(shù)組。數(shù)組中的元素有以下屬性：lastModifiedDate，name，size，type，webkitRelativePath，如圖：
這樣的話，我們就可以檢測(cè)到size：
var fileData = file.files[0]; var size = fileData.size; //注意，這里讀到的是字節(jié)數(shù) var isAllow = false; var maxSize = Max_Size; maxSize = maxSize * 1024; //轉(zhuǎn)化為字節(jié) isAllow = size <= maxSize;
兼容性：ie9下讀不到input file.files這個(gè)屬性。思考：怎么辦？
如何讀取圖片的width,height？
圖片真實(shí)的寬度和高度，可以通過(guò)實(shí)例化Image對(duì)象、加載src 來(lái)獲取。
兼容性：IE下使用濾鏡來(lái)處理圖片尺寸控制
全部代碼：
測(cè)試
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82218.html
摘要：前陣子七夕的時(shí)候搞了一個(gè)活動(dòng)頁(yè)，需要做一個(gè)本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。還有就是是配合實(shí)現(xiàn)的，因?yàn)槲沂侵苯釉陧?xiàng)目中復(fù)制過(guò)來(lái)改改的，就懶得轉(zhuǎn)換了圖片讀取要裁剪首先肯定就是讀取圖片文件。 前陣子七夕的時(shí)候搞了一個(gè)h5活動(dòng)頁(yè)，需要做一個(gè)本地圖片的裁剪上傳功能，用于生成一些特定的表白圖片。主要是用到了H5的FileApi 和 Canvas。個(gè)人感覺(jué)圖片裁剪功能還是很實(shí)用的...
摘要：中的圖片處理與合成一引言圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言： 圖片處理現(xiàn)在已經(jīng)成為了我們生活中的剛需，想必大家也經(jīng)常有這方面的需求。實(shí)際前端業(yè)務(wù)中，也經(jīng)常會(huì)有很多的項(xiàng)目需要用到圖片加工和處理。由于過(guò)去一段時(shí)間公司的業(yè)務(wù)需求，讓我在這方面積累...
閱讀 1282·2021-11-15 18:14
閱讀 3168·2021-08-25 09:38
閱讀 2673·2019-08-30 10:55
閱讀 2704·2019-08-29 16:39
閱讀 1316·2019-08-29 15:07
閱讀 2457·2019-08-29 14:14
閱讀 821·2019-08-29 12:36
閱讀 921·2019-08-29 11:21
