JS涓殑鏁版嵁绫诲瀷

Posted 2020-12-21

鏍囩锛?a href='http://www.mamicode.com/so/1/src' title='src'>src   ext   缁存暟   鏈嶅姟   鍥剧墖   楂樺害   杩涘埗   view   鏃犳硶璇诲彇   

浠嬬粛

鍥惧儚鍙互鐢ㄥ绉嶄笉鍚岀殑绫诲瀷鏁版嵁琛ㄧず锛屾湰鏂囧皢瀹冧滑褰掔撼涓?5 绉嶇被鍨嬶細DOM锛孶RL锛孎ile锛孖mageData 鍜?Buffer銆?/p>

DOM

<img>
<img> 鍏冪礌浠?URL锛圖ata URL锛孒TTP URL 鎴?Object URL锛夊姞杞藉浘鍍忋€?/p>

<canvas>
<canvas> 鍏冪礌閫氳繃 canvas API drawImage 鏉ヨ幏鍙?URL

Data URL
Data URL 甯︽湁 base64 缂栫爜鐨勫浘鍍忔暟鎹€傚彲浠ヤ粠 Data URL 鏁版嵁涓В鐮佸嚭鍥惧儚鐨勪簩杩涘埗鏁版嵁銆侱ata URL 鏁版嵁鐨勫ぇ灏忔瘮鍘熷鐨勪簩杩涘埗鏁版嵁澶т竴浜涖€?/p>

HTTP URL

HTTP URL 浠ｈ〃瀛樺偍鍦ㄦ湇鍔″櫒涓婄殑鍥惧儚銆侶TTP URL 鐢ㄤ簬浠庢湇鍔″櫒鑾峰彇鍥惧儚鏁版嵁銆?/p>

Object URL

Object URL 鐢ㄦ潵浠ｈ〃瀛樺偍鍦ㄦ祻瑙堝櫒鍐呭瓨涓殑 File 鎴?Blob 瀵硅薄銆侽bject URL 鍙互鐢眂reateObjectURL API 鏉ュ垱寤猴紝骞剁敱 revokeObjectURL API 閲婃斁銆?/p>

鏂囦欢

Blob

Blob 鏄甫鏈変簩杩涘埗鏁版嵁鐨勭被鏂囦欢瀵硅薄銆傚畠鍖呭惈涓€涓彧璇荤殑 size 灞炴€у拰涓€涓彧璇荤殑 type 灞炴€с€備綘鍙互閫氳繃 slice锛宻tream锛宼ext 绛夋柟娉曟潵璇诲彇浜岃繘鍒舵暟鎹€?/p>

File

涓€涓?File 瀵硅薄鏄竴涓壒娈婄殑 Blob 瀵硅薄銆傞櫎浜?Blob 鐨勫睘鎬у拰鏂规硶澶栵紝File 瀵硅薄杩樺寘鍚?lastModified锛宯ame 绛夊睘鎬с€?/p>

ImageData

涓€涓?ImageData 瀵硅薄鏄竴涓?javascript 瀵硅薄锛屽寘鍚?width锛宧eight 鍜?data 灞炴€э紝鍒嗗埆琛ㄧず鍥惧儚瀹藉害锛岄珮搴﹀拰鍍忕礌鏁版嵁銆?data 灞炴€ф槸涓€涓竴缁存暟缁勶紝鍖呭惈 R锛孏锛孊锛孉锛孯锛孏锛孊锛孉 杩欐牱鏍煎紡鐨勬暟鎹€傛瘡涓?R锛孏锛孊锛孉 浠ｈ〃涓€涓儚绱犮€傚彲浠ラ€氳繃 API createImageData 鎴?ImageData 鏋勯€犲嚱鏁版潵鍒涘缓 ImageData銆?/canvas>

Buffer

ArrayBuffer
ArrayBuffer 鏄湪娴忚鍣ㄤ腑鍞竴涓€绉嶈闂簩杩涘埗鏁版嵁鐨勬柟娉曘€侫rrayBuffer 浠ｈ〃鍥惧儚鐨勫師濮嬩簩杩涘埗鏁版嵁缂撳啿鍖恒€傛垜浠棤娉曡鍙栧拰鍐欏叆 ArrayBuffer 锛屽彧鑳藉皢 ArrayBuffer 杞崲涓?DataView 鎴?TypedArray 鏉ヨ鍙栧拰鍐欏叆浜岃繘鍒舵暟鎹€?/p>

Buffer

Buffer 鏄?Node.js 涓壒娈婄殑涓€绉?Uint8Array锛孨ode.js 瀵瑰叾杩涜浜嗕竴浜涗紭鍖栥€?/p>

鍦?ArrayBuffer锛孌ataView锛孴ypedArray 鍜?Buffer 涔嬮棿杞崲

鍦?DOM锛孶RL锛孊lob(File)锛孖mageData 鍜?Buffer 涔嬮棿杞崲