canvas前端壓縮圖片

阿新 • • 發佈：2018-01-15

參考 read ble element pre dev 轉換制圖 status

參考網上的用法，下面是利用canvas進行的圖片壓縮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content=" 
black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>slip</title>
    <style>
        *{padding: 0;margin: 0;}

    </style>

</head>

<body>
<div class 
="input">
    <input type="file" id="file" accept="image/*">
</div>

</body>

<script type="text/javascript">

    var img=new Image();
    var reader=new FileReader();
    // 選擇的文件對象
    var file = null;
    var eleFlile=document.querySelector(‘#file‘);
    var canvas=document.createElement(‘ 
canvas‘);
    var context=canvas.getContext(‘2d‘);
    img.onload=function () {
        //圖片原始大小
        var originWidth = this.width;
        var originHeight = this.height;
        //限制圖片大小
        var maxWidth = 400;
        var maxHeight = 400;

        var targetWidth = originWidth, targetHeight = originHeight;
        if (originHeight > maxHeight || originWidth > maxWidth) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
                //更寬
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
                //更高
                targetHeight = maxHeight;
                targetWidth = Math.round(targetHeight * (originWidth / originHeight))
            }
        }
        //圖片縮放
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        //清除畫布
        context.clearRect(0, 0, targetWidth, targetHeight);
        //圖片壓縮
        context.drawImage(img, 0, 0, targetWidth, targetHeight);
        //轉換上傳toBlob
        canvas.toBlob(function (blob) {
            //圖片ajax上傳
            var xhr=new XMLHttpRequest();
            //文件上傳成功
            xhr.onreadystatechange=function () {
                if(xhr.status==200){
                    alert("上傳成功")
                }
            };
            xhr.open("POST","upload.php",true);
            xhr.send(bolb);
        } ,file.type || ‘image/png‘);
            var newImg = document.createElement("img"),
                url = URL.createObjectURL(blob);

            newImg.onload = function () {
                // no longer need to read the blob so it‘s revoked
                URL.revokeObjectURL(url);
            };

            newImg.src = url;
            document.body.appendChild(newImg);

//        })
        //圖片上傳toDataURL
        var url=canvas.toDataURL();
        var newImg = document.createElement("img")
        newImg.src = url;
        document.body.appendChild(newImg);
    }
    //文件base64化
    reader.onload=function (e) {
        img.src=e.target.result;
    };
    eleFlile.addEventListener("change",function (event) {

        file=event.target.files[0];
        if(file.type.indexOf("image")==0){
            reader.readAsDataURL(file);
        }else {
            alert("請傳圖片")
        }
    })
</script>

</html>

canvas前端壓縮圖片

參考 read ble element pre dev 轉換制圖 status 參考網上的用法，下面是利用canvas進行的圖片壓縮 <!DOCTYPE html> <html> <head> <meta charset

如何有效實現前端壓縮圖片並上傳功能

res 滿足 utf boot ade 賦值 als 多次 and 　　隨著現在手機的像素越來越高，很多照片動輒幾兆甚至十幾兆，上傳後在服務器端壓縮已經越來越不能滿足當今的需求。這對於許多技術人員來說，處理起來這樣的問題往往不知道該怎麽下手，那麽下面就跟大家講解一下如何在前

web前端壓縮圖片方法——加快頁面載入速度

對於web前端頁面開發，圖片是一個很重要的組成部分。為了達到圖文並茂的效果，我們希望頁面中能有更多的圖片，但是從頁面載入的速度講，過多過大的圖片都會拖慢載入速度。於是對於圖片的壓縮處理就

前端壓縮圖片以及php後端上傳

後端壓縮已經越來越不能滿足使用者的需求，尤其在前端日益發展的今天，前端壓縮勢在必行。以前由於一直沒有找到合適的前端壓縮的方法，一次放棄，一次次繞行，最終沒有繞過這道坎。接下來我們說一下前端壓縮還有上傳 1.引入js,index.js已上傳我的資源。

base64上傳頭像；php ajax前端壓縮圖片上傳；thinkphp5非同步上傳頭像

實現效果：點選頭像，直接選擇圖片，選完圖片，直接執行非同步上傳並替換圖片相關知識點：php+ajax 亮點：如果選擇圖片較大，會在前端進行壓縮上傳，有利於提高上傳速度和減輕伺服器壓力 html程式碼比較簡單，實際上就是用絕對定位將上傳框定位到圖片上層，並將背景透明

上傳圖片時壓縮圖片 - 前端（canvas）做法

als ase java use reac ice efi 壓縮圖片 basic HTML前端代碼： <?php $this->layout(‘head‘); ?> <?php $this->layout(‘sidebar‘); ?>

前端進行圖片壓縮

inpu das call read 簡單 scrip reat dataurl -c 無意中看到html5的FileRader這個對象，之前沒見過，查閱了下資料發現是個讀取文件的東西。於是簡單實現了下將圖片轉換成編碼： <!DOCTYPE html> <

Nodejs前端服務器壓縮圖片

res back gem callback nbsp 承擔能力 true bsp Nodejs作為前端服務器，自然能承擔處理圖片的能力，使用GM for nodejs 作為圖片處理器，調用ImageMagick處理圖片使用ImageMagick var image

前端獲取圖片壓縮後上傳給後臺

state das progress tee 解決辦法字符 buffer arc 前端　此前有同事跟我聊過關於移動端用canvas壓縮圖片後再上傳的功能，最近有了點空閑時間，所以就實踐了一下。demo效果鏈接在文章底部貼出。　　在做移動端圖片上傳的時候，用戶傳

megapix-image外掛使用Canvas壓縮圖片上傳 MegaPixImage.js下載

MegaPixImage.js下載地址 <!DOCTYPE html > <html> <head> <title>通過Canvas及File API縮放並上傳圖片</title> <script

前端實現手機相簿或照相預覽圖片及壓縮圖片的方法

總體思路是： 1、FileReader.readAsDataURL將上傳的圖片檔案轉為Base64格式 2、將img繪製到canvas上，canvas.toDataURL壓縮圖片 3、new Blob將壓縮後的Base64轉為Blob格式 4、FormData.append將圖片檔案資料存入formdata

HTML5利用canvas壓縮圖片（不改變圖片寬和高）

最近專案中有一個手機拍照上傳的需求，現在的智慧手機攝像頭畫素很高，拍出來的照片大小大都在5M左右，當手機在上傳圖片時遇到了問題，之前採用的方法是將圖片先進行Base64編碼，然後上傳到伺服器，結果因為圖片太大，導致伺服器老是回覆超時錯誤；權衡之下決定在圖片上傳之前先將圖片壓縮；以下為我採用方法

JS+HTML5實現前端的圖片壓縮上傳到騰訊的COS上

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="w

利用canvas壓縮圖片並上傳

一前言最近負責的H5中，有個上傳照片的功能，照片是上傳到阿里雲。大家可能知道，手機拍到照片一般都較大，而伺服器限制了上傳圖片的大小（伺服器好像是可以設定這個大小的），於是開始研究利用canvas壓縮圖片，當然你也可以利用外掛。廢話不多說，只要你仔細看完，保證你能成功。二程式碼 HTML

前端本地客戶端壓縮圖片，相容IOS，Android，PC、自動按需載入檔案

演示一下自己試試說明在客戶端壓縮好要上傳的圖片可以節省頻寬更快的傳送給後端，特別適合在移動裝置上使用。為什麼需要已踩過很多坑，經過幾個版本迭代，以及很多很多網友的反饋幫助、機型測試圖片扭曲、某些裝置不自動旋轉圖片方向，沒有jpeg壓縮演算法

Vue directive自定義指令+canvas實現H5圖片壓縮上傳-Base64格式

前言最近優化專案-手機拍照圖片太大，回顯速度比較慢，使用了vue的自定義指令實現H5壓縮上傳base64格式的圖片 canvas自定義指令 Vue.directive("canvas",

使用canvas在前端實現圖片合成

看著總結的不錯，我也就拿來主義了，做個記錄，侵權必刪圖片合成最常見的需求有驗證碼圖片，亦或者圖片加水印等，這種實現一般都是後端實現的。隨著HTML5發展和現代瀏覽器的佔比越來越高，我們其實也可以在前端直接進行圖片的合成。優點在於，響應更快，體驗更好；如果是和文字進行合成，我們

java後臺通過IO流訪問圖片（帶壓縮程式碼）讓前端顯示圖片

業務需求是兩個不同的web程式放在不同的伺服器上，web程式A要訪問到web程式B上傳上來的檔案顯示到頁面上，所以用到了這一個IO讀取圖片的介面 Html程式碼 //html img標籤兩種方式一種直接寫死在src裡這種不太靈活另一種通過js賦值src

前端進行圖片壓縮並傳入後臺

客戶端：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-demo</title>

分享一個前端等比壓縮圖片外掛

no photo no bb。。。。程式猿的美感一般般，將就看看，主要是效果實現了就行了。注意，當前的等比壓縮精度可能不是很精確，最多有0.01的誤差，就是說，js的parseInt結果不夠準確，可能將寬度或高度多給了1畫素。假如要求高的話可以自己再改改。具體思路及

canvas前端壓縮圖片

參考網上的用法，下面是利用canvas進行的圖片壓縮

相關推薦