您好,登錄后才能下訂單哦!
javascript圖片上傳預(yù)覽怎么弄?這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容,讓我們一起來(lái)看看吧!
hello,大家好,游戲開(kāi)始了,歡迎大家收看這一期的講解。本次的內(nèi)容是圖片的上傳預(yù)覽。最后發(fā)源碼鏈接。
廢話不多說(shuō),先上圖。
待上傳圖像
點(diǎn)擊藍(lán)色框內(nèi),pc可以選擇文件,移動(dòng)端選擇拍照或選擇圖片進(jìn)行上傳。
HTML部分
<div class="img-box"> <div class="card-box"> <div class="default-box" > <img class="default-img" src="./cardFactory.png" alt=""> <div class="default-title">請(qǐng)點(diǎn)擊</div> <img class="add-img" src="./add.png" alt=""> </div> <div class="up-img" id="upImg"></div> <input type="file" id="addImg" class="upImg-btn"> </div> </div>
.default-box這層就是加號(hào)圖像
up-img是轉(zhuǎn)碼后顯示圖像的地方。
下面input是選擇圖像的地方。
css
.img-box { display: flex; justify-content: center; align-items: center; } .card-box { width: 7.5rem; height: 4rem; border: solid .04rem #23a7fe; border-radius: 4px; box-sizing: border-box; position: relative; } .upImg-btn { width: 100%; height: 100%; opacity: 0; position: absolute; top: 0; left: 0; } .up-img { width: 5.58rem; height: 3.12rem; margin: .2rem .6rem; position: absolute; top: .2rem; left: 0; background-repeat: no-repeat; background-position: center center; background-size: cover } .default-box { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .add-img { position: absolute; top: 50%; left: 50%; margin-left: -.64rem; margin-top: -.64rem; width: 1.28rem; height: 1.28rem; } .default-img { position: absolute; padding: 0 1.1rem; bottom: .68rem; box-sizing: border-box; width: 100%; opacity: .5; } .default-title { position: absolute; width: 100%; bottom: .12rem; text-align: center; color: #23a7fe; font-size: .32rem; }
內(nèi)部就是定位了。
頁(yè)面js
document.querySelector("#addImg").addEventListener("change",function () { changeImg({ id:"addImg", //input的Id 必須 imgBox:'upImg', //顯示位置Id 必須 limitType:['jpg','png','jpeg'], //支持的類型 必須 limitSize:819200 //圖片超過(guò)多大開(kāi)始進(jìn)行壓縮 可不傳 }); });
我們監(jiān)聽(tīng)input的change時(shí)間,然后傳入?yún)?shù)dShowImg64.js代碼
//id,limitType,limitSize function changeImg(obj = {}) { if(!obj.id) return; if(!obj.limitType)return; var dom = document.querySelector("#"+obj.imgBox); var files = document.querySelector("#"+obj.id).files[0]; var reader = new FileReader(); var type = files.type && files.type.split('/')[1]; //文件的類型,判斷是否是圖片 var size = files.size; //文件的大小,判斷圖片的大小 if (obj.limitType.indexOf(type) == -1) { alert('不符合上傳要求'); return; } //判斷是否傳入限制大小。壓不壓縮。 var limitSize = obj.limitSize ? parseInt(obj.limitSize) : 0; if (size < limitSize) { reader.readAsDataURL(files); // 不壓縮,直接轉(zhuǎn)base64 reader.onloadend = function () { dom.style.backgroundImage = "url("+this.result+")"; //如果要上傳的話,在這里調(diào)用ajax document.querySelector(".default-box").style.display = "none"; } } else { //壓縮 var imageUrl = this.getObjectURL(files); //創(chuàng)造url this.convertImg(imageUrl, function (base64Img) { //調(diào)用壓縮函數(shù) dom.style.backgroundImage = "url("+base64Img+")"; //如果要上傳的話,在這里調(diào)用ajax document.querySelector(".default-box").style.display = "none"; }, type) } } function convertImg(url, callback, outputFormat) { var canvas = document.createElement('CANVAS'); //繪制canvas var ctx = canvas.getContext('2d'); var img = new Image; //初始化圖片 img.crossOrigin = 'Anonymous'; img.onload = function () { var width = img.width; var height = img.height; // 按比例壓縮2倍 //設(shè)置壓縮比例,最后的值越大壓縮越高 var rate = (width < height ? width / height : height / width) / 2; canvas.width = width * rate; canvas.height = height * rate; //繪制新圖 ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate); //轉(zhuǎn)base64 var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); //回調(diào)函數(shù)傳入base64的值 canvas = null; }; img.src = url; } function getObjectURL(file) { //創(chuàng)造指向該圖的URL var url = null; if (window.createObjectURL != undefined) { //大部分執(zhí)行這個(gè) url = window.createObjectURL(file); } else if (window.URL != undefined) { // 兼容 url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // 兼容 url = window.webkitURL.createObjectURL(file); } return url; }
首先獲取各種屬性如類型、大小
判斷圖片是否小于限制大小、小于的話直接轉(zhuǎn)base64,大于的話 利用canvas 進(jìn)行縮小完成壓縮后轉(zhuǎn)base64 然后將得到的值設(shè)置為背景圖。然后隱藏add的樣式。
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)javascript圖片上傳預(yù)覽怎么弄大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。