成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

JS圖片壓縮預(yù)覽/下載

zhisheng / 3019人閱讀

摘要：上代碼，看注釋就完了這里選擇圖片畫(huà)布注意這個(gè)是數(shù)組下面這三行就可以實(shí)現(xiàn)文件選擇了圖片以后，預(yù)覽的功能，但是有些圖片可能太大了影響頁(yè)面觀感，得統(tǒng)一縮小下。

前言

好像沒(méi)啥好說(shuō)的~

大概做法

先由filereader獲取圖片的base64，控制圖片生成，但不顯示。

然后將圖片按比例設(shè)置好壓縮后的寬高繪制在canvas畫(huà)布上。

之后利用canvas的自帶方法再次轉(zhuǎn)換成base64，再對(duì)base64進(jìn)行解碼存儲(chǔ)到數(shù)組緩存區(qū)，生成blob，然后創(chuàng)建下載鏈接就完了。

上代碼，看注釋就完了 
//html
 //這里選擇圖片
 //canvas畫(huà)布
//js
document.getElementById("file").onchange = function () {
        console.log(this.files[0]);
        //注意這個(gè)files是數(shù)組
        reader.readAsDataURL(this.files[0]);
        var reader = new FileReader();
        reader.onload = function (e) {
            //下面這三行就可以實(shí)現(xiàn)文件選擇了圖片以后，預(yù)覽的功能，但是有些圖片可能太大了影響頁(yè)面觀感，得統(tǒng)一縮小下。
            //var img = new Image();  
            // img.src = e.target.result;  
            // document.body.appendChild(img);
            render(e.target.result) //這個(gè)方法實(shí)現(xiàn)圖片的壓縮下載
        }  

}
    var MAX_H = 100;
    function render(src){  
        // 創(chuàng)建一個(gè) Image 對(duì)象  
        var image = new Image();  
        // 設(shè)置src屬性，加載圖片內(nèi)容，此時(shí)還未壓縮
        image.src = src;  
        // 綁定 load 事件處理器，加載完成后執(zhí)行  
        image.onload = function(){  
            // 獲取 canvas DOM 對(duì)象  
            var canvas = document.getElementById("canvas");  
            // 如果高度超標(biāo)  
            if(image.height > MAX_H) {  
                // 寬度等比例縮放 *=  
                image.width *= MAX_H / image.height;  
                image.height = MAX_H;  
            }  
            // 獲取 canvas的 2d 環(huán)境對(duì)象, 有些上古瀏覽器不支持canvas
            var ctx = canvas.getContext("2d");  
            // canvas清屏  
            ctx.clearRect(0, 0, canvas.width, canvas.height);  
            // 把canvas寬高設(shè)置為圖片寬高  
            canvas.width = image.width;  
            canvas.height = image.height;  
            // 將圖像繪制到canvas上 
            //drawImage(img,startX,startY,endX,endY)
            ctx.drawImage(image, 0, 0, image.width, image.height);  
            //將繪制好的canvas圖像轉(zhuǎn)為DataURL
            //toDataURL(圖片類(lèi)型,圖片質(zhì)量)，這個(gè)圖片質(zhì)量越高就越清晰（相同寬高）
            //canvas.toDataURL 返回的默認(rèn)格式就是 image/png
            var data = canvas.toDataURL("image/jpeg",0.5);
           //獲取圖片的dataUrl轉(zhuǎn)成blob
           //這下面轉(zhuǎn)blob的代碼我也沒(méi)搞懂，無(wú)百度了DataURL轉(zhuǎn)blob就是這些代碼了
            data = data.split(",")[1];
            data = window.atob(data);
            var ia = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
            };
            var blob = new Blob([ia], {
                type: "image/jpeg"
            });
            
            //生成blob文件的下載鏈接，把鏈接附在a便簽上，把a(bǔ)便簽加入dom中，點(diǎn)擊就可以下載啦
            
            var url3 = URL.createObjectURL(blob);
            var a = document.createElement("a");
            a.href = url3;
            a.text = "測(cè)試圖片";
            a.download = "mytest.jpg";
            document.body.appendChild(a);
        };  
    };
效果預(yù)覽

后語(yǔ)

壓縮后上傳的操作，這里就不寫(xiě)了，百度下blob如何生成file上傳即可。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101692.html

相關(guān)文章

  • 開(kāi)箱即用-簡(jiǎn)潔實(shí)用的ImgURL圖床相冊(cè)程序和Zdir目錄列表程序(文件管理器）

    摘要：本篇文章就來(lái)分享一下兩款開(kāi)箱即用上手容易的圖床相冊(cè)程序和在線文件管理器目錄列表程序，由好友開(kāi)發(fā)并維護(hù)，非常適合個(gè)人站長(zhǎng)用作圖床相冊(cè)和文件下載分享。雖然說(shuō)現(xiàn)在照片還有文件存儲(chǔ)等都可以上傳到網(wǎng)盤(pán)中，但是國(guó)內(nèi)的網(wǎng)盤(pán)與國(guó)外的網(wǎng)盤(pán)存儲(chǔ)還有點(diǎn)不一樣。以百度網(wǎng)盤(pán)與Dropbox對(duì)比為例，百度網(wǎng)盤(pán)頂多算是一個(gè)個(gè)人用來(lái)存放私人照片和文件的網(wǎng)絡(luò)硬盤(pán)，如果用來(lái)分享的話很容易被百度限制或者取消下載。很多的個(gè)人站長(zhǎng)為...

    番茄西紅柿 評(píng)論0 收藏2637

  • gulp常用功能集合（開(kāi)發(fā)和生產(chǎn)分離、靜態(tài)資源壓縮優(yōu)化、代碼優(yōu)化、實(shí)時(shí)預(yù)覽、hash）

    摘要：在資源很多時(shí)，例如圖片的復(fù)制，這個(gè)會(huì)加快任務(wù)的執(zhí)行速度，特別是需要實(shí)時(shí)預(yù)覽時(shí)，減少延遲。但是作為個(gè)入門(mén)短時(shí)間內(nèi)還是不能夠被取代得了的。 gulp常用功能集合（開(kāi)發(fā)和生產(chǎn)分離、靜態(tài)資源壓縮優(yōu)化、代碼優(yōu)化、實(shí)時(shí)預(yù)覽、hash） tags: gulp 前端自動(dòng)化開(kāi)發(fā) npm倉(cāng)庫(kù)下載地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基礎(chǔ)上的...

    silvertheo 評(píng)論0 收藏0

  • web圖片上傳時(shí)的一種本地壓縮預(yù)覽方案

    摘要：簡(jiǎn)介本文結(jié)合實(shí)際項(xiàng)目場(chǎng)景，記錄圖片上傳時(shí)的一種本地壓縮預(yù)覽解決方案?？紤]到這些問(wèn)題，決定采用本地圖片進(jìn)行預(yù)覽。解決過(guò)程接下來(lái)說(shuō)明將待上傳的本地圖片展示到界面中。這樣就在前端實(shí)現(xiàn)了簡(jiǎn)單的圖片壓縮處理。 簡(jiǎn)介 本文結(jié)合實(shí)際項(xiàng)目場(chǎng)景，記錄圖片上傳時(shí)的一種本地壓縮預(yù)覽解決方案。這里的本地預(yù)覽是指，頁(yè)面上的圖片是讀取的本機(jī)資源進(jìn)行展示，而沒(méi)有通過(guò)網(wǎng)絡(luò)請(qǐng)求加載。 實(shí)際的項(xiàng)目場(chǎng)景 在這陣子的項(xiàng)目開(kāi)發(fā)...

    ytwman 評(píng)論0 收藏0

  • PDF文件預(yù)覽項(xiàng)目選型

    摘要：文件預(yù)覽項(xiàng)目選型文件在線預(yù)覽有多種方式，目前使用較多的有種。中文支持較好，沒(méi)有亂碼問(wèn)題。在線示例中文文檔可以將轉(zhuǎn)換成，并且可以在中精確顯示原生文本包括在中的字體顏色位置，可以選擇搜索復(fù)制等，可選單文件輸出。缺點(diǎn)文件過(guò)大可能會(huì)出現(xiàn)瀏覽器卡死。 PDF文件預(yù)覽項(xiàng)目選型 PDF文件在線預(yù)覽有多種方式，目前使用較多的有3種：pdf2swf、pdf2image、pdf2html。這3種方式各有優(yōu)...

    Scott 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<