2. 程式人生 > >HTML5移動端圖片瀏覽上傳

HTML5移動端圖片瀏覽上傳

阿新 • • 發佈：2019-01-13
$(function(){ //壓縮後圖片陣列 var files=new Array(); //用於壓縮圖片的canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext('2d'); //瓦片canvas var tCanvas = document.createElement("canvas"); var tctx = tCanvas.getContext("2d"); $("#file").change(function
(){ //圖片是否符合規則 if(test(this.value) == false || this.files[0].size/1024>1024*5) { $(".toast").text(test(this.value)?"圖片過大，請選擇小於5M的圖片":"請選擇圖片檔案").show(); setTimeout(function(){$(".toast").hide();},2000); $('#file').val(''); return; } //圖片瀏覽
if($("#fileList li img[alt='"+this.files[0].name+"']").length ==0){ var url = getObjectURL(this.files[0]); var $li = $("<li><img src='"+url+"' alt='"+this.files[0].name+"'><div class='cancel'>x</div></li>"); $("#fileList").append($li); var
$cancel = $li.find(".cancel"); $cancel.click(function(){ var index = $(this).parent().index(); if(index ==0) files = files.slice(1); else if(index == files.length-1) files = files.slice(0,index); else files = files.slice(0,index).concat(files.slice(index-files.length+1)); $(this).parent().remove(); event.stopPropagation(); }); $li.click(function(){ $(".comment").hide(); $(".single").show(); $(".single img").attr("src",$(this).find("img").attr("src")); push(); }); compressImg(url,800,480); $('#file').val(''); } }) function test(value) { var regexp = new RegExp("(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png)$",'g'); return regexp.test(value); } function compressImg(url,maxWidth,maxHeight) { var canvas = document.getElementById("canvas"); var img = new Image(); // 記住必須先繫結事件，才能設定src屬性，否則img沒內容可以畫到canvas img.src = url; img.onload = function() { if(img.width > maxWidth){ img.height *= maxWidth / img.width; img.width = maxWidth; } else{ img.width *= parseFloat(maxHeight) / img.height; img.height = maxHeight; } //壓縮後的圖片流存到陣列中 files[files.length] = compress(img); //圖片的base64字元流 alert("圖片的base64位元組流："+files[files.length-1]); }; } //使用canvas對大圖片進行壓縮 function compress(img) { var width = img.width; var height = img.height; //如果圖片大於四百萬畫素，計算壓縮比並將大小壓至400萬以下 var ratio; if ((ratio = width * height / 4000000) > 1) { ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; //鋪底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果圖片畫素大於100萬則使用瓦片繪製 var count; if ((count = width * height / 1000000) > 1) { count = ~~(Math.sqrt(count) + 1); //計算要分成多少塊瓦片 //計算每塊瓦片的寬和高 var nw = ~~(width / count); var nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (var i = 0; i < count; i++) { for (var j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw* ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height); } //進行最小壓縮 var ndata = canvas.toDataURL('image/jpeg', 0.5); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; //獲取檔案base64位元組流 return ndata.split(",")[1]; } //建立一個可存取到改file的url（讀取url載入圖片速度快於讀取base64，圖片越大字元流越長，小圖片也得成百上千個字元） function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } })

相關推薦

HTML5移動端圖片瀏覽上傳

$(function(){ //壓縮後圖片陣列 var files=new Array(); //用於壓縮圖片的canvas var canvas = document.createElement("canvas"); var ctx = canvas.getCo

移動端圖片壓縮上傳解決方案

長度 繪制圖片 slice ase 但是 choose 100萬 lis 計算 最近做移動端圖片上傳，發現圖片尤其是iPhone拍照的圖片都有2M左右，但是實際上項目中用不到這麽大，於是想到要用js在前臺進行壓縮。 解決方案如下： 　【一】獲取圖片數據 　　先是獲取圖片數據

vue移動端圖片裁剪上傳

1. 安裝cropperjs依賴庫 npm install cropperjs 2. 編寫元件SimpleCropper.vue <template> <div class="v-simple-cropper"> <slot>

移動端圖片裁剪上傳—jQuery.cropper.js

The new ++ spec 得到 end ipad 安卓 java jQuery.cropper.js是一款使用簡單且功能強大的圖片剪裁jQuery插件。該圖片剪裁插件支持圖片放大縮小，支持圖片旋轉，支持觸摸屏設備，支持canvas，並且支持跨瀏覽器使用。 一、移動端獲

移動端通過ajax上傳圖片（文件）並在前臺展示——通過H5的FormData對象

com 地址 ces 文件 只需要 capture val data als 前些時候遇到移動端需要上傳圖片和視頻的問題，之前一直通過ajax異步的提交數據，所以在尋找通過ajax上傳文件的方法。發現了H5裏新增了一個FormData對象，通過這個對象可以直接綁定html中

PC或者移動端常用的上傳圖片

在開發app過程中我們遇到了這樣的需求，要求上傳身份證，評價晒圖，意見反饋晒圖等，還要可以單個上傳和多張上傳。要實現也不難，話不多少，直接上程式碼。 html  <!DOCTYPE html> <html> <head> <m

移動端h5頭像上傳、頭像裁切、上傳圖片

初步想的步驟是這樣的： 一、點選頭像區域選擇本地圖片 二、顯示被選本地圖片顯示裁剪選取框 三、確認選取後，上傳到阿里雲返回路徑 四、初始點選區域顯示裁剪完成的圖片 程式碼片段 <div align="center" class="face"> &l

移動端一次上傳多個圖片（動態建立file型別的input）

描述 最近在做公司的一個移動端上傳圖片的業務，如果這是在PC端，將非常的簡單，因為給input設定屬性multiple後PC端按住ctrl鍵就可以一次性選擇多個圖片，但是在移動端確不可以，移動端選擇一張圖片後會自動返回到APP中，想再新增一張的話還需要再次進入

移動端web頭像上傳實現截取和照片方向修復

trac 支持 隱藏 gre jquery 頭像 圖像加載 fun 僅供參考 實戰所需js包： jQuery、Jcrop、EXIF 本次實戰功能是在 app 中的 我的客戶 的客戶信息頁面中實現移動端web的頭像上傳，本次沒有實現圖像拖拽、縮放的觸摸事件功能(Jcro

Vue的移動端多圖上傳插件vue-easy-uploader

ext gin ted log code 支持 使用 tip master 原文地址 前言 這段時間趕項目，需要用到多文件上傳，用Vue進行前端項目開發。在網上找了不少插件，都不是十分滿意，有的使用起來繁瑣，有的不能適應本項目。就打算自己折騰一下，寫一個Vue的上傳插件，一

移動前端圖片壓縮上傳

safari 嘻嘻 如果 tee ini andro 並且 ons create 　　摘要：之前在做一個小遊戲平臺項目，有個“用戶中心”模塊，就涉及到了頭像上傳的功能。在做移動端圖片上傳的時候，傳的都是手機本地圖片，而本地圖片一般都相對比較大，拿現在的智能手機來說，平時拍很

移動端網頁錄音上傳，服務端智慧語音識別

移動端網頁錄音上傳，服務端智慧語音識別 最近，看了創業時代的魔鏡，想法突如起來，能不能手機發送一條語音，語音上傳到後臺，自動識別語音的資訊，轉化為文字，將文字分析，然後回覆使用者豔學網的資源。 我們的資源以原始碼為主，一起編集豔學情緣。我們不僅分享原始碼 http://47.98.2

HTML5 本地裁剪圖片並上傳至伺服器 canvas圖片上傳 canvas圖片裁剪

很多情況下使用者上傳的圖片都需要經過裁剪，比如頭像啊什麼的。但以前實現這類需求都很複雜，往往需要先把圖片上傳到伺服器，然後返回給使用者，讓使用者確定裁剪座標，傳送給伺服器，伺服器裁剪完再返回給使用者，來回需要 5 步。步驟繁瑣不說，當很多使用者上傳圖片的時候也很影響伺服器

H5移動端多圖上傳+進度條

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

H5移動端剪下上傳頭像

        移動端比如app，ios，微信，H5頁面開發過程中很多人都會遇到更換頭像的需求，這時我們需要實現點選頭像選擇相簿圖片或者拍照，然後對圖片進行壓縮裁剪，然後進行提交上傳，到更換頭5像的效果。話不多說，上傳效果圖：

H5+jqweui實現手機端圖片壓縮上傳 Base64

主要功能，使用H5的formData上傳base64格式的圖片，canvas壓縮圖片，前端樣式使用weui，為方便起見，使用了jquery封裝過的weui，jqweui。話不多少，開始上程式碼。前端程式碼，直接在jqweui官網下的demo裡改的（是dist下的demo）<!DOCTYPE html&g

H5+jqweui實現手機端圖片壓縮上傳

主要功能，使用H5的formData上傳base64格式的圖片，canvas壓縮圖片，前端樣式使用weui，為方便起見，使用了jquery封裝過的weui，jqweui。 話不多少，開始上程式碼。 前端程式碼，直接在jqweui官網下的demo裡改的（是dist下的demo） <!DOCTYPE ht

移動前端—圖片壓縮上傳實踐

　　 此前有同事跟我聊過關於移動端用canvas壓縮圖片後再上傳的功能，最近有了點空閒時間，所以就實踐了一下。demo效果連結在文章底部貼出。 　　在做移動端圖片上傳的時候，使用者傳的都是手機本地圖片，而本地圖片一般都相對比較大，拿iphone6來說，平時拍很多圖片都是一兩M的，如果直接這樣上傳，那圖片就太

簡單粗暴的移動端圖片瀏覽外掛demo

使用方法： 首先引入 jQuery <script src="./fly-zomm-img.min.js"></script> 再引入 圖片瀏覽外掛 <script

HTML5 本地裁剪圖片並上傳至伺服器（老梗）

很多情況下使用者上傳的圖片都需要經過裁剪，比如頭像啊什麼的。但以前實現這類需求都很複雜，往往需要先把圖片上傳到伺服器，然後返回給使用者，讓使用者確定裁剪座標，傳送給伺服器，伺服器裁剪完再返回給使用者，來回需要 5 步。步驟繁瑣不說，當很多使用者上傳圖片的時候也很影響伺服器效