解决在iphone4S以上手机用Canvas压缩图片变形的方法

林氏智造 于 2018-01-25 发布 11837 人已阅

手机web能调用手机的摄像头,这功能真是能带来很多玩法;不过拍摄出来的图片大小必须经过本地压缩不然上传的时候流量就花花的去。通过这次在iphone系列的手机上做这功能折腾了许久,最终还是靠下面的代码解决了压缩问题,也算有所收获!

megapix-image插件

解决在iphone4s,iphone5,iphone5s使用Canvas压缩图片会变形的问题,老外写代码只能说非常给力。

var fileInput = document.getElementById('fileInput');
  fileInput.onchange = function() {
    var file = fileInput.files[0];.
    var mpImg = new MegaPixImage(file);
    var resImg = document.getElementById('resultImage'); 
    mpImg.render(resImg, { maxWidth: 300, maxHeight: 300, quality: 0.5 });
    var resCanvas1 = document.getElementById('resultCanvas1');
    mpImg.render(resCanvas1, { maxWidth: 300, maxHeight: 300 });
    var resCanvas2 = document.getElementById('resultCanvas2');
    mpImg.render(resCanvas2, { maxWidth: 300, maxHeight: 300, orientation: 6 });
  };

您可能感兴趣的文章

vue.js开发环境准备工作

开发vue项目前需要对整个vue项目进行开发环境的部署,包括所需组件的安装,webpack的配置等。

jqMobi中的scroller使用方法

学习jqMobi中的scroller对象的学习笔记,记录了scroller如何创建如何下拉刷新,上拉刷新等功能使用代码