码迷,mamicode.com
首页 > 其他好文 > 详细

canvas压缩图片

时间:2014-07-01 00:40:54      阅读:456      评论:0      收藏:0      [点我收藏+]

标签:android   blog   http   java   使用   width   

1.canvas.toDataUrl压缩图片

canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所以前端可实现上传图片的压缩。先通过fileApi拿到本地图片地址,然后新建一个Img元素,图片绘制到canvas中后再将其导出(压缩)。例如:

$(‘:file‘).on(‘change‘,function(){
        var file = this.files[0];
        var url = webkitURL.createObjectURL(file);

        /* 生成图片
        * ---------------------- */
        var $img = new Image();
        $img.onload = function() {

            //生成比例
            var width = $img.width,
                    height = $img.height,
                    scale = width / height;
            width = parseInt(800);
            height = parseInt(width / scale);

            //生成canvas
            var $canvas = $(‘#canvas‘);
            var ctx = $canvas[0].getContext(‘2d‘);
            $canvas.attr({width : width, height : height});
            ctx.drawImage($img, 0, 0, width, height);
            var base64 = $canvas[0].toDataURL(‘image/jpeg‘,0.5);

            //发送到服务端
            $.post(‘upload.php‘,{formFile : base64.substr(22) },function(data){
                $(‘#php‘).html(data);
            });

        }
        $img.src = url;

    });

2.存在问题

但是此方法存在一些问题:

  1.在ios上当图片过大时图片会被压扁

  2.在android上无法指定压缩质量

  3.图片通过fileApi读取进来,竖着拍的图片会横置

好在这些问题都有解决方案:

  1.使用ios-imagefile-megapixel,将大图拆分为一块块的小图读取到小canvas再拼起来(还可以设置图片旋转)

  2.使用javascript_jpeg_encode

  3.使用JpegMeta(没有测过)

参考自:http://my.oschina.net/hzplay/blog/160806

canvas压缩图片,布布扣,bubuko.com

canvas压缩图片

标签:android   blog   http   java   使用   width   

原文地址:http://www.cnblogs.com/plusice/p/3817391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!