h5本地預覽上傳的圖片或視頻

justjavac 發布于2019-08-26 10:29 / 842人閱讀

摘要：通過中的事件拿到的不能直接在本地預覽選擇的圖片或者視頻，可以通過以下兩種方式預覽本地圖片，不用上傳到服務器就可以本地預覽。

通過中的change事件拿到的file不能直接在本地預覽選擇的圖片或者視頻，可以通過以下兩種方式預覽本地圖片，不用上傳到服務器就可以本地預覽。

createObjectURL

這種方式生成的文件地址可以預覽圖片和視頻




    
    Title

本地預覽的視頻地址最終結果 blob格式

FileReader

var reader = new FileReader();

reader.onload =function(e){
    aImg.src = e.target.result;
}
reader.readAsDataURL(file); // file是指選擇的文件 files[0]

本地預覽的視頻地址最終結果 base64格式

按照前輩們的說法，creatObjectURL可以有更好的性能，或許是瀏覽器自帶接口的原因, 可以處理的更快。

云服務器 GPU云服務器圖片本地預覽預覽本地圖片 php 預覽上傳圖片上傳圖片預覽php

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106247.html

H5 canvas生成圖片并上傳文件轉成PDF下載canvas文字排版

摘要：將預覽的圖片上傳，后端生成，在管理系統中下載。技術要點文字排版設置指定背景顏色引入外部字體繪制文字圖片將生成的圖片轉成上傳這里根據后端協商，此處后端要求將圖片生成，并點擊批量下載實現步驟文字排版在一般容器中，如果要實現文字的排版很容易。最近遇到一個業務需求，在小程序端定制預覽功能，并在預覽的圖片中使用指定的外部字體。將預覽的圖片上傳OSS，后端生成PDF，在管理系統中下載。但是………...

canopus4u 2019-08-23 18:24 評論0 收藏0
H5 Video 使用網絡地址時獲取其大小和第一幀圖片

摘要：問題描述某一天接了個需求，要求前端獲取視頻文件的大小時長以及第一幀圖片傳給后端服務器存儲，這樣有兩種情況，一種是通過上傳本地視頻文件，一種是給出視頻的網絡地址，將其直接賦值給標簽的屬性。問題描述某一天接了個需求，要求前端獲取視頻文件的大小、時長以及第一幀圖片傳給后端服務器存儲，這樣有兩種情況，一種是通過input上傳本地視頻文件，一種是給出視頻的網絡地址，將其直接賦值給video標...

NoraXie 2019-08-22 16:33 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)

摘要：二編輯合成照片使用編輯壓縮重設尺寸比例轉成輸出預覽。三保存并上傳照片提交數據到服務器需要服務器支持我跳過了。數據主要來自拍攝的照片，多用于移動端開發，端也會用到，此插件兼容主流瀏覽器，以下不支持。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端...

lmxdawn 2019-08-26 10:31 評論0 收藏0