WebApp HTML5 Canvas 压缩上传图片

关于H5图片上传一直是一个非常蛋痛的问题, 以至于现在都没有找到一个非常好的解决方案, 去年的年初尝试gokercebeci/canvasResize这个方案勉强解决了这个问题, 但是并不算是十分理想, iOS上仍然是拍照后会莫名旋转, 曾经在GitHub上看到有位大神谢了一个库是专门处理这个问题的, 自己试了下貌似并不行, 也不知道现在是个什么情况了, 有空再去看下(但愿会有空吧), 这里提供一个Jquery版本的图片压缩上传的方案.

代码实现

底层代码是通过Canvas进行了压缩, 最终返回base64编码的字符串, H5的前端压缩除了Canvas应该没有更便捷的方法了吧, 嘻嘻..

<a href="javascript:;" id="change_avatar"></a>
<!-- 这里需要写两个input代码才能执行, 原因密 -->
<input name="photo" type="file" style="display: none;" />
<input name="photo" type="file" style="display: none;" />

<script src="js/jquery.exif.js"></script>
<script src="js/jquery.canvasResize.js"></script>
<script>
$('#change_avatar').click(function() {
    $('input[name=photo]').trigger('click');
});

$('input[name=photo]').change(function(e) {
    var file = e.target.files[0];
    // CANVAS RESIZING
    $.canvasResize(file, {
        width: 150,
        height: 0,
        crop: false,
        quality: 80,
        callback: function(base64_img, width, height) {
            $.post(
                settings.jsonp_Server + '/user/upload_image', {
                    phone_num: phone_num,
                    base64_img: base64_img,
                    dataType: "jsonp"
                },
                function(data) {
                    alert('上传成功');
                },
                "json"
            );
        }
    });
});
</script>

参考资料

gokercebeci/canvasResize
think2011/LocalResizeIMG
移动端图片上传方法【更好的兼容安卓IOS和微信】
HTML5+Canvas手机拍摄，本地压缩上传图片，案例实测报告