2. 程式人生 > >頭像上傳剪裁預覽功能js實現，以及Safari中一個坑。

頭像上傳剪裁預覽功能js實現，以及Safari中一個坑。

阿新 • • 發佈：2019-01-13
// 彈窗 layui.use('layer', function(){ var layer = layui.layer; // 上傳圖片 $('.tc').click(function(){ layer.open({ type: 1, title:['請選擇圖片','font-size:20px;color:#fff;'], area:['700px','550px'], content: $('#uploadTx'
) //這裡content是一個普通的String }); }); var w,h; var flag=false; // 上傳圖片按鈕 $('.uploadBtn').click(function(){ $('#postFile').click(); flag=true; }); // 重新上傳 $('.reUpload').click(function(){ $('#postFile').click(); }); // 擷取頭像方法 function
screenshot() { html2canvas($('.screenshot'), { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; var dataUrl = canvas.toDataURL(); $('.bigTx').attr('src',dataUrl); $('.mediumTx'
).attr('src',dataUrl); $('.smallTx').attr('src',dataUrl); } }); } // input內容改變 $('#postFile').change(function() { // 初始化影象大小 $('.uploadImg').css('background-size','auto'); var val = this.value; var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上傳的格式 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //從字串中抽出最後一次出現.之後的字元，並且轉換成小寫 var result = upLoadType.indexOf(fileExt); //查詢字尾名是否符合條件，如果符合返回>=0，如果不符合則返回負數; var oFReader = new FileReader(); if (this.files.length === 0) { return; } var oFile = this.files[0]; //如果只有一個檔案則只需要訪問這個FileList物件中的第一個元素. if (result < 0) { layer.msg('您上傳的格式有誤！'); return; } else{ $('.uploadBtn').hide(); $('.shadeDiv').show(); $('.btnList').show(); }; oFReader.readAsDataURL(oFile); // 開始在後臺進行讀取操作。當影象檔案的所有內容載入後,他們轉換成一個data:URL,傳遞到onload回撥函式中 oFReader.onload = function (oFREvent) { //當讀取操作成功完成時呼叫. var image=new Image(); image.src=oFREvent.target.result; image.onload=function(){ w=image.width; h=image.height; } $('.uploadImg').css('background-image','url('+oFREvent.target.result+')'); }; screenshot(); }); // 滑鼠滾動改變圖片大小 // $('.uploadImg').on("mousewheel DOMMouseScroll", function(e) { // if(flag){ // var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie // (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox // $(document).off("mousewheel DOMMouseScroll"); // if (delta > 0) { // // 向上滾 // $('.addSize').click(); // } else if (delta < 0) { // // 向下滾 // $('.subtractSize').click(); // } // } // }); // 點選按鈕調節圖片大小 // 變大 $('.addSize').click(function(){ w*=1.1; h*=1.1; $('.uploadImg').css('background-size',w+'px '+h+'px'); screenshot(); }); // 變小 $('.subtractSize').click(function(){ w*=0.9; h*=0.9; $('.uploadImg').css('background-size',w+'px '+h+'px'); screenshot(); }); //預覽 $('.seeTx').click(screenshot); // // 拖動 // var mx,my,//滑鼠初始座標 // ex,ey,//滑鼠最終座標 // px,py;//原有的position座標 // $('.uploadImg').mousedown(function(e){ // // 圖片顯示後有效 // if(flag){ // var offset=$(this).offset(); // mx=e.pageX-offset.left; // my=e.pagey-offset.top; // } // }); // $('.uploadImg').mousemove(function(e){ // // 圖片顯示後有效 // if(flag){ // var offset=$(this).offset(); // ex=e.pageX-offset.left; // ey=e.pagey-offset.top; // $('.uploadImg').css('background-size',x+'px '+y+'px'); // } // }); // $('.uploadImg').mouseup(function(e){ // // 圖片顯示後有效 // if(flag){ // var offset=$(this).offset(); // ex=e.pageX-offset.left; // ey=e.pagey-offset.top; // $('.uploadImg').css('background-size',x+'px '+y+'px'); // } // }); });

相關推薦

頭像上傳剪裁預覽功能js實現，以及Safari中一個坑。

// 彈窗 layui.use('layer', function(){ var layer = layui.layer; // 上傳圖片 $('.tc').click(function(){ layer

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

JS實現上傳圖片預覽功能

js實現上傳圖片預覽功能思路是獲取上傳圖片本地路徑，再載入到頁面中實現上傳預覽 HTML程式碼 <div class="upload"> <input type="button" class="btn" onclick=

js實現多圖片上傳的預覽功能

圖片預覽： html程式碼：  <input type="file" name="file" id="doc" multiple="multiple" style="width:150px;" onchange="javascript:setImagePrevi

input file實現多選，限制文件上傳類型，圖片上傳前預覽功能

ava eight tag HA ont accep 多選 red 異常 限制上傳類型 & 多選：① accept 屬性只能與 <input type="file" /> 配合使用。它規定能夠通過文件上傳進行提交的文件類型。 ② multiple 屬性規

基於jQuery和cropper點選頭像上傳並預覽裁剪圖片

使用jquery上傳前，預覽圖片，裁剪，示例使用php接收上傳的檔案，並且儲存為裁剪後的圖片。不需要上傳後再裁剪圖片，只需要本地裁剪好即可，裁剪的時候也可以旋轉圖片。裁剪控制元件使用了，cropper。 html程式碼 <!DOCTYPE html> <html la

vue+axios+vuetify 執行圖片上傳及預覽功能

上傳前 上傳後 html <v-img :src="photoSrc?photoSrc:`${baseUrl}images/photoFile.jpg`" aspect-ratio="0.8" v-if="change" &g

web前端——實現上傳圖片預覽功能

function previewImage(file) {         var MAXWIDTH = 100;         var MAXHEIGHT = 100;         //var div = document.getElementById('preview');          if

layui實現圖片上傳 和 預覽功能

效果如下： HTML 的程式碼： <div class="box" style="width: 180px;float: left;"> <div class="layui-upload"> <div class="layui-ro

頭像上傳前本地預覽功能的實現(相容ie8)

以下程式碼為頭像的上傳前預覽功能的實現，UI可自行發揮。可用form表單提交檔案，也可使用jquery.form.js外掛實現。下面demo中使用的form提交。 <!DOCTYPE html> <html> <head lang="en">

js圖片上傳預覽功能相容實現

<html> <head> <title>js圖片上傳預覽</title> <script> function PreviewImage(imgFile) { var filextension=imgFile.value.subst

js 文件異步上傳 顯示進度條 顯示上傳速度 預覽文件

response null acc 文件的 pen 實現 accept https 提交 通常文件異步提交有幾個關鍵 1.支持拖拽放入文件。2.限制文件格式。3.預覽圖片文件。4.上傳進度，速度等，上傳途中取消上傳。5.數據與文件同時上傳 現在開始筆記： 需要一個最基礎的元

js 實現非同步上傳圖片+預覽

兩種js實現方式，一種用原生的ajax；另一種用JQuery，例子比較簡單，直接上程式碼。 <!DOCTYPE html> <html> <head> <title>Title</title> <link h

js 上傳圖片預覽

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="localImag">

使用js和jquery實現點選圖片上傳及預覽

//上傳頭像 $(".avator-btn-fake").click(function(){ $("#upload").click(); }); $("#upload").change(function(){ var

js上傳圖片預覽，php後臺接收例項，已改寫為多圖上傳預覽

上傳圖片預覽這個出自超實用的js程式碼段，關於圖片的處理那一章，php後臺接收是網上比較少這方面的資源或者寫得很複雜，這裡簡單記錄。都是基於js 首先先呼叫兩個資料夾animateManage.js和viewimg.js，可以在網上下載。相當好用。 關鍵點是FileRead

js實現上傳圖片預覽，購物車加減

js效果（一）：上傳的圖片預覽 $("#path").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log("objUrl = "+objUrl) ; if (ob

JS相容各個瀏覽器的本地圖片上傳即時預覽效果

function change() { var pic = document.getElementById("preview"), file = document.getElementById("f"); var ext=file.value.substring(file

神馬？使用JS直接上傳並預覽貼上板的圖片？

（題圖：梵高-橄欖樹） 提出需求 因為工作原因，現在有一個需求就是需要使用者使用QQ或者微信複製一張截圖後，在div中直接貼上這張圖片，而不是採用上傳的方式。類似我們在使用QQ微信時直接貼上截圖的操作，這個要怎麼用js來實現呢？ 實現原理 我們可以利用 Clipboard 這個介面API 來實現。 根據

[轉]html之file標簽 --- 圖片上傳前預覽 -- FileReader

disabled scrip ade java undefine 內容 .com 知識 nim 記得以前做網站時，曾經需要實現一個圖片上傳到服務器前，先預覽的功能。當時用html的<input type="file"/>標簽一直實現不了，最後舍棄了這個標簽，使用