欢迎访问东莞市添瑞纺织品有限公司网站!

网站地图 在线客服  |   网站首页  |  

热门关键词:莱卡布绒布床垫布料箱包手袋布料家私用品布料服装内衣布料

东莞市添瑞纺织品有限公司

电话:0769-82272558

传真:0769-85937699

邮箱:2546458611@qq.com

公司地址:广东省东莞市厚街镇厚沙路祠边小区三横路17号

    客户问答

  • 客户问答客户问答客户问答
    发布日期:2017-03-30 来源:www.tianruifz168.com

     手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。

    因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。

    总体思路是:

    1. 使用HTML5的FileReader接口来读取用户上传的图片

    2. 使用canvas drawImage接口绘制到Canvas 2d中

    3. 使用canvas toDataUrl接口把图片转成base64编码字符串(这里可以降低图片质量)

    4. 完成image src的替换后,表单提交时,就提交新的被压缩过的图像

    这里不重复贴代码,直接看在线演示:http://wow.techbrood.com/fiddle/30625

    该方案支持IE10+, FF, Chrome, Safari等现代浏览器。

    有两点需要注意:

    1. 注意在FF下,类似这样的处理方案必须确保canvas绘制和toDataUrl的处理是同步进行的,

    也就是不能是异步处理的,否则可能会出现其他事件触发页面组合(Composite)而导致canvas缓存被清空的情况,那样toDataUrl出来的会是空白字符串。

    2. 需要等image加载完成再做draw和转换的动作,否则一些浏览器会有问题。

下一篇:没有了