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的文件流，如果有问题欢迎评论，会及时回复。