👨‍🏫图片压缩Canvas

#å³äºå¦ä½å®ç°åç¼©

æ¥éMDNæ¾å°çæ¯è¿ä¸ªAPIï¼

// callbackå¤çblobä¸»è¦ï¼typeå¾çç±»åï¼encoderOptionså¾çåç¼©æ¯ä¾ 0-1
canvas.toBlob(callback, type, encoderOptions); 
å¤å¶ä»£ç

#ææå¾

#å®ç°ä»£ç

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding: 20px 0;
        #fileSelect{
            margin-top: 10px;
            padding: 10px 5px;
            border: 1px solid chartreuse;
            border-radius: 5px;
            background: green;
            color: white;
            text-decoration: none;
        #fileSelect:hover{
            opacity: 0.8;
    </style>
</head>
    <input type="file" id="fileElem" multiple accept="image/*" style=""
        onchange="handleFiles(event,this.files)">
    <a href="#" id="fileSelect">ç¹å»ä¸ä¼ </a>
</body>
<script>
    window.onload = function () {
        var fileSelect = document.getElementById("fileSelect"),
            fileElem = document.getElementById("fileElem");
        fileSelect.addEventListener("click", function (e) {
            if (fileElem) {
                fileElem.click(); // inputæä»¶ä¸ä¼ 
            e.preventDefault(); 
        }, false);
    function handleFiles(e, files) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /^image\//;
            if (!imageType.test(file.type)) {
                continue;
            console.log(file);
            const width = 500;
            const height = 300;
            const fileName = file.name;
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = event => {
                const img = new Image();
                img.src = reader.result;
                img.onload = () => {
                    const elem = document.createElement('canvas');
                    elem.width = width;
                    elem.height = height;
                    const ctx = elem.getContext('2d');
                    // canvaså¤§å°è®¾ç½®
                    ctx.drawImage(img, 0, 0, width, height);
                    // æ¤å¥åå®¹
                    document.body.append(elem);
                    //--------- å¦æä¸éè¦èµæºä¸ä¼ ï¼åªéæ¾ç¤ºï¼ä¸é¢ä»£ç å¯ä»¥ä¸è¦äº------
                    ctx.canvas.toBlob((blob) => {
                        const file = new File([blob], fileName, {
                            type: 'image/jpeg',
                            lastModified: Date.now()
                        console.log(file); // fileä¸ºåç¼©åçå¾ç
                    }, 'image/jpeg', 10e-9);
                    // ----------------------
                reader.onerror = error => console.log(error);
</script>
</html>
å¤å¶ä»£ç

#æµç¨

1. new FileReader()

é¦åéè¦çæ¯å©ç¨è¿ä¸ªAPIæ¥è¯»åæä»¶ï¼å®ä¾åä¹åéç¨ readAsDataURL çæ¹å¼æ¥è¯»åå¾ççèµæºè·¯å¾,è¿éçå¼å®¹æ§ä¸éï¼åéäºå ä¹æææµè§å¨çæ¬åå¹³å°ã
reader.readAsDataURL(file); //è¿æ ·è¯»åå¾çï¼ä¸è¿°ä¾åå¯ä»¥å¤éæä½ï¼æä»¥å¾ªç¯äºä¸
2.reader.onloadçåè°ä¸åå»ºå¾ç
// åå»ºå¾çåå®¹
 const img = new Image();
// å°å¾çå°åç»å®å°base64,è¿ééå°ä¸ä¸ªé®é¢éç¨event.target.resultåä¸å°å½åï¼readerä¸é¢æresultå±æ§å¯ç¨
 img.src = reader.result;
3.åå»ºç»å¸ï¼ç»å¶å¾çåå®¹
 // åå»ºcanvasç»å¸
 const elem = document.createElement('canvas');
 // è®¾ç½®ç»å¸å¤§å°
 elem.width = width; 
 elem.height = height;
 //è·åðï¸
 const ctx = elem.getContext('2d')
 // ç»å¶
 ctx.drawImage(img, 0, 0, width, height); // drawImageè¿éæ¥çMDNææ¡£å³å¯
 // æ¤å¥é¡µé¢
 document.body.append(elem);
å¤å¶ä»£ç 
4.åéç¹åç¼©ï¼å°canvasåç¼©å¤§å°è½¬ä¸ºimageå¯¹è±¡
ctx.canvas.toBlob((blob) => {
    const file = new File([blob], fileName, {
        type: 'image/jpeg', // è¿éçæ ¼å¼å¯ä»¥æ¯jpgï¼pngï¼gifï¼pngçï¼é½è¯äºä¸ï¼åç¼©å¤§å°ä¸å
        lastModified: Date.now()
    console.log(file);
}, 'image/jpeg', 10e-9); // è¿éç10e-9å¾å°äº æé0-1 0æ¯æå¤§åç¼©æ¯çï¼ 1è¿éæç¹çå¦åå¤§äº è¶è¿1 æèå°äº0 å¤§å°å¤§æ¦åç¼©äº6æå·¦å³
è¿éçå°ä¸ä¸ªå¼å®¹æ§çé®é¢,ä¸»è¦èèçSarari IOSä¸ï¼è°å«å®¢æ·ç¨å¢ï¼
// MDNç»é¤äºå¼å®¹ä»£ç ï¼å¤§ä½æ¯æ¯å¨Objectååæ·»å äºtoBlobå½æ°å®ç°ï¼ç²è´´æ·»å å°±å¥½
if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      var dataURL = this.toDataURL(type, quality).split(',')[1];
      setTimeout(function() {
        var binStr = atob( dataURL ),
            len = binStr.length,
            arr = new Uint8Array(len);
        for (var i = 0; i < len; i++ ) {
          arr[i] = binStr.charCodeAt(i);
        callback( new Blob( [arr], {type: type || 'image/jpeg'} ) );
å¤å¶ä»£ç 
#ç»è¯
ç½ä¸èµææºå¤ï¼æ²¡æ¾å°ä¸ä¸å°±è½è·çï¼æ¥æ¥ææå®ç°äºåè½ï¼è¿è½ç¨ï¼æ¯ççã -- 2019å¹´3æ25æ¥ å¨è¾¹æ äºº
#åèèµæ
MIME ç±»å
HTMLCanvasElement.toBlob()
FileReader
Canvas API
CanvasRenderingContext2D.drawImage()

#å ³äºå¦ä½å®ç°åç¼©

#ææå¾

#å®ç°ä»£ç 

#æµç¨

#ç»è¯­

#åèèµæ

#å³äºå¦ä½å®ç°åç¼©

#ææå¾

#å®ç°ä»£ç

#æµç¨

#ç»è¯

#åèèµæ