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

2. canvas自定義指令

Vue.directive("canvas", {
    bind: function (el, binding) {
        // 壓縮圖片需要的一些元素和物件
        var reader = new FileReader(), img = new Image();
        // 選擇的檔案物件
        var file = null;
        // 縮放圖片需要的canvas
        var canvas = document.createElement('canvas'
 
);
        var context = canvas.getContext('2d');
        // base64地址圖片載入完畢後
        img.onload = function () {
            // 圖片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
            //比例壓縮
            var rate = 0.4;
            var targetWidth = originWidth * rate, targetHeight = originHeight * rate;

            // canvas對圖片進行縮放
 

            canvas.width = targetWidth;
            canvas.height = targetHeight;
            // 清除畫布
            context.clearRect(0, 0, targetWidth, targetHeight);
            // 圖片壓縮
            context.drawImage(img, 0, 0, targetWidth, targetHeight);
            // canvas轉為blob並上傳
            $.ajax({
                url: 'user/upload/base64'
 
,
                type: 'post',
                data: {
                    file: canvas.toDataURL("image/jpeg", 0.7)
                },
                success: binding.value,
                error: function (e) {
                    alert(e.status);
                }
            })
        };

        // 檔案base64化，以便獲知圖片原始尺寸
        reader.onload = function(e) {
            img.src = e.target.result;
        };
        el.addEventListener('change', function (event) {
            file = event.target.files[0];
            // 選擇的檔案是圖片
            if (file.type.indexOf("image") == 0) {
                reader.readAsDataURL(file);
            }
        });
    }
});

1. HTML

<div id="_upload">
    <i v-on:click="upload">自定義上傳檔案樣式</i>
    <input id="_file" v-canvas="success" style="display: none;"/>
</div>

1. JS

var uploadVue = new Vue({
    el: '#_upload',
    methods: {
        upload: function () {
            $("#_file").click();
        },
        success: function (data) {
            //處理上傳圖片成功Ajax回撥
        }
    }
});

結束

demo同時依賴Vue和Jquery, 同時要求後臺可以處理base64的檔案流，如果有問題歡迎評論，會及時回覆。