国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

圖片上傳預覽轉壓縮并轉base64詳解(dShowImg64.js)

NeverSayNever / 879人閱讀

摘要:本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內,可以選擇文件,移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。

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;
        }

內部就是定位了。

頁面js

    document.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的樣式。


最后的預覽圖像

git地址:https://github.com/Zhoujiando...
以后會加入更多的小插件。 最后祝大家身體健康,謝謝。

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

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

相關文章

  • 圖片上傳預覽壓縮base64詳解dShowImg64.js

    摘要:本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內,可以選擇文件,移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello,大家好,游戲開始了,歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說,先上圖。showImg(https://segmentfault.com/img...

    wums 評論0 收藏0
  • 圖片上傳預覽壓縮base64詳解dShowImg64.js

    摘要:本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內,可以選擇文件,移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello,大家好,游戲開始了,歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說,先上圖。showImg(https://segmentfault.com/img...

    zorro 評論0 收藏0
  • JS圖片壓縮上傳(單張)

    摘要:環境,這里的指到實例一圖片壓縮文件類型是圖片格式,文件壓縮后對象,,容器或者回調函數開始讀取指定對象中的內容讀取操作完成時返回一個格式的字符串開始壓縮利用數據化圖片進行壓縮圖片轉指到默認按比例壓縮默認圖片質量為生成創建屬性節點圖像質量值越 *vue+webpack環境,這里的that指到vue實例 一、圖片壓縮 /* file:文件(類型是圖片格式), ...

    KaltZK 評論0 收藏0
  • 無需Flash實現圖片裁剪——HTML5中級進階

    摘要:需求就是那么簡單,在瀏覽器里裁剪圖片并上傳到服務器。原圖片對象上傳裁剪后的對象初始化圖片預覽根據裁剪參數繪制轉對象以下將對每個環節詳解。或者根據獲取裁剪信息包括旋轉和縮放用進行手動繪制。 前言 圖片裁剪上傳,不僅是一個很貼合用戶體驗的功能,還能夠統一特定圖片尺寸,優化網站排版,一箭雙雕。 需求就是那么簡單,在瀏覽器里裁剪圖片并上傳到服務器。 我第一個想到的方法就是,將圖片和裁剪參數(x...

    JerryC 評論0 收藏0

發表評論

0條評論

NeverSayNever

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<