标签:android blog http java 使用 width
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; });
但是此方法存在一些问题:
1.在ios上当图片过大时图片会被压扁
2.在android上无法指定压缩质量
3.图片通过fileApi读取进来,竖着拍的图片会横置
好在这些问题都有解决方案:
1.使用ios-imagefile-megapixel,将大图拆分为一块块的小图读取到小canvas再拼起来(还可以设置图片旋转)
3.使用JpegMeta(没有测过)
参考自:http://my.oschina.net/hzplay/blog/160806
标签:android blog http java 使用 width
原文地址:http://www.cnblogs.com/plusice/p/3817391.html