本篇文章給大家帶來的内容是關于php協成實作的詳解(附代碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
hello，大家好，遊戲開始了，歡迎大家收看這一期的講解。本次的内容是圖檔的上傳預覽。最後發源碼連結。
廢話不多說，先上圖。
待上傳圖像
點選藍色框内，pc可以選擇檔案，移動端選擇拍照或選擇圖檔進行上傳。
HTML部分
請點選
.default-box這層就是加号圖像
up-img是轉碼後顯示圖像的地方。
下面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;
}
内部就是定位了。
頁面jsdocument.querySelector("#addImg").addEventListener("change",function () {
changeImg({
id:"addImg", //input的Id 必須
imgBox:'upImg', //顯示位置Id 必須
limitType:['jpg','png','jpeg'], //支援的類型 必須
limitSize:819200 //圖檔超過多大開始進行壓縮 可不傳
});
});
我們監聽input的change時間，然後傳入參數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); // 不壓縮，直接轉base64
reader.onloadend = function () {
dom.style.backgroundImage = "url("+this.result+")";
//如果要上傳的話，在這裡調用ajax
document.querySelector(".default-box").style.display = "none";
}
} else { //壓縮
var imageUrl = this.getObjectURL(files); //創造url
this.convertImg(imageUrl, function (base64Img) { //調用壓縮函數
dom.style.backgroundImage = "url("+base64Img+")";
//如果要上傳的話，在這裡調用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倍 //設定壓縮比例，最後的值越大壓縮越高
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); //轉base64
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL); //回調函數傳入base64的值
canvas = null;
};
img.src = url;
}
function getObjectURL(file) { //創造指向該圖的URL
var url = null;
if (window.createObjectURL != undefined) { //大部分執行這個
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;
}
首先擷取各種屬性如類型、大小
判斷圖檔是否小于限制大小、小于的話直接轉base64，大于的話 利用canvas 進行縮小完成壓縮後轉base64 然後将得到的值設定為背景圖。然後隐藏add的樣式。
最後的預覽圖像
以後會加入更多的小插件。 最後祝大家身體健康，謝謝。