文档章节

手机端图片压缩裁剪上传

Geomen
 Geomen
发布于 2017/07/13 09:25
字数 620
阅读 169
收藏 1

说明

     项目需要,手机通过扫码打开页面上传商品图片,手机拍出来的图片一般都是长方形,而我们的商品图片则需要正方形.
    解决方案是长宽哪个长就截取哪边.这个我用的是提交图片截取坐标到服务器上再截取.这里用到的是cropper这个插件.
    现在手机拍照像素都比较高,图片太大,上传不方便,这时候就需要在上传前压缩下图片.之前有找到一个叫resize.min.js的压缩插件,发现有问题,PC上测试没问题,iphone 上测试大于4M以上的图片返回的base64不正常,无法显示图片.后来使用html5ImgCompress,倒是没发现这个问题!!
    出于VUE是后来为了样式才加上的,所有变成jquery与vue一锅炖,显得有点乱哈~

###html端

<img id="image" src="/images/button_upload.png" style="width: 100%;height: auto">
<div class="container">
                <div class="a-upload">
                    <input id="imageInput" type="file" name="myPhoto" accept="image/*" @change="choiceImg"> 选 择 图 片
                </div>
   </div>

js端

var vm = new Vue({
        el: '#app',
        data: {
            fileData: '', //图片文件
            coord: '' //坐标串
        },
        methods: {
            choiceImg: function () {
                this.$dialog.loading.open('图片加载中...');
            },
            submitUpload: function(){
                var that = this;
                var formData = new FormData();
                formData.append("logo",this.fileData);
                formData.append('coord', this.coord);
                $.ajax({
                    url: "服务器路径",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        if(!that.fileData){
                            that.$dialog.toast({
                                mes: '未选择图片!',
                                timeout: 1500,
                                icon: 'error'
                            });
                            return false;
                        }
                        that.$dialog.loading.open('图片上传中...');
                    },
                    complete: function () {
                        that.$dialog.loading.close();
                    },
                    success: function (res) {
                        console.log(res);
                        if(res.r){
                            var icon = 'success';
                        }else{
                            var icon = 'error';
                        }
                        that.$dialog.toast({
                            mes: res.i,
                            timeout: 1500,
                            icon: icon,
                            callback: () => {
                                window.location.reload();
                            }
                        })
                    },
                    error: function (res) {
                        console.log(res);
                        that.$dialog.toast({
                            mes: '上传失败',
                            timeout: 1500,
                            icon: 'error'
                        })
                    }
                });
            }
        }
    });
    /** base64转成文件,网上找的,看起来有点老了 */
    function dataURItoBlob(dataURI) {
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0) {
            byteString = atob(dataURI.split(',')[1]);
        }else {
            byteString = unescape(dataURI.split(',')[1]);
        }
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {type:mimeString});
    }

    $(function () {
        var $image = $('#image');
        //jquery监听图片选择
        $('input[type=file]').on('change', function () {
            var file = $(this)[0].files[0];
            new html5ImgCompress(file, {
                before: function(file) {
                    console.log('单张: 压缩前...');
                },
                done: function (file, base64) {
                    console.log('单张: 压缩成功...');
                    $image.cropper('destroy');
                    $image.attr('src', base64);
                    vm.fileData = dataURItoBlob(base64);
                    $image.cropper({
                        viewMode: 1,
                        aspectRatio: 1 / 1,
                        height: 600,
                        width: 600,
                        autoCropArea: true,
                        dragCrop: false,
                        rotatable: false,
                        zoomable: false,
                        zoomOnTouch: false,
                        zoomOnWheel: false,
                        cropBoxResizable: false,
                        minCropBoxWidth: 600,
                        minCropBoxHeight: 600,
                        crop: function (e) {
                            console.log(e.x);
                            console.log(e.y);
                            console.log(e.width);
                            console.log(e.height);
                            vm.coord = JSON.stringify(e);
                            vm.$dialog.loading.close();
                        }
                    });
                },
                fail: function(file) {
                    console.log('单张: 压缩失败...');
                },
                complete: function(file) {
                    console.log('单张: 压缩完成...');
                },
                notSupport: function(file) {
                    alert('浏览器不支持!');
                }
            });
        });
    })

上传前

提交前的页面

上传并刷新页面后

提交后

© 著作权归作者所有

Geomen
粉丝 21
博文 46
码字总数 13481
作品 0
厦门
程序员
私信 提问
使用PhoneGap裁剪和压缩图片并上传(安卓版)

安装phonegap的camera插件后,可以对从图片库选择图片进行裁剪或压缩操作。 安装方法 使用命令行安装camera插件: phonegap plugin add org.apache.cordova.camera 使用方法 1 裁剪图片。下面...

crazymus
2014/11/21
7.2K
0
html5 上传本地图片处理各种问题

原文还是在简书上: html5 上传本地图片处理各种问题 这是最近给公司写一个项目,项目要求大概是这样子: 1.上传手机本地图片,然后裁剪(后加的需求) 2.能够旋转图片,用于裁剪(后面加的需...

乖小鬼YQ
2017/11/29
0
0
如何在微信公众号开发中实现图片裁剪

接触微信公众号开发已经有一段时间了,发现其实和网页开发差不多,但是因为浏览器的不同,自己也碰过一些坑,其中就有怎么实现图片裁剪功能。 一开始我是用PC端的思路去做的,首先在本地获取...

豆花饭烧土豆
2016/08/17
411
0
Android-图片的选择,裁剪,压缩,适配高版本

趁着国庆有时间我们来聊一聊最常用的选取用户图片一系列的功能,go! 效果展示 效果展示链接 1.图片的选取 拍照 我们之前设置拍照保存的文件地址的Uri,都是直接Intent.putExtra(MediaStore.EX...

猴亮屏
01/18
48
0
关于Webapp图片压缩优化问题

经常遇到这样的情景,就是webapp展示一个列表的时候,列表里面很多图片。 对于图片你们是一般怎么做? 1:请求图片的时候nginx裁剪 2:上传的时候裁剪,请求直接返回对应对应图片 3:请求的时...

巴顿
2016/02/15
947
3

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部