移动端预览压缩上传图片

lixiang 发布于2019-08-05 18:19 / 1910人阅读

摘要：移动端预览压缩上传图片推荐一个使用成熟的解决方案文章已同步我的笔记，欢迎大家加，加后人生更加美好原理介绍移动端图片上传，通过生成图片资源进行预览，通过进行图片的压缩，将图片转换成对象上传。

移动端预览压缩上传图片

推荐一个使用成熟的解决方案：https://github.com/think2011/...

文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生更加美好……

原理介绍

移动端图片上传，通过FileReader生成base64图片资源进行预览，通过canvas进行图片的压缩，将图片url转换成Blob对象上传。

实现方案

初始页面布局




    
    图片上传

使用FileReader进行图片预览

/**
 * [previewImg 预览图片]
 * @param  {[type]} input [文件上传input]
 * @param  {[type]} obj   [description]
 * @return {[type]}       [description]
 */
function previewImg(input,imgObj) {
    var maxsize = 300 * 1024;//超过300k进行压缩
    //是否支持
    if (typeof FileReader === "undefined") {
        alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
        input.setAttribute("disabled","disabled");
    }
    if(input.files && input.files[0]){
        var file = input.files[0],
            reader = new FileReader();
        if(!/image/w+/.test(file.type)) {
            alert("不是有效的图片文件!");
            return;
        }
        reader.onload = function(e){
            var result =　this.result;//获取到base64的图片
            //大于300k图片进行压缩
            if(result.length >= maxsize){
                var img = new Image();
                img.src = result;
                img.onload = function(){
                    compressSrc = compress(img,0.8,100);
                    $(imgObj).setAttribute("src",compressSrc);
                    //ajax dataURLtoBlob(compressSrc);
                }
            }else{
                $(imgObj).setAttribute("src",result);
                //ajax dataURLtoBlob(result);
            }
        }
    }
}

使用canvas图片压缩，不过在ios中图片大于2000000像素就无法使用canvas压缩，就需要瓦片绘制。

/**
 * [compress 压缩图片]
 * @param  {[dom]} sourceImg [图片dom]
 * @param  {[int]0-1} scale     [缩小的尺寸比例]
 * @param  {[int]0-100} quality   [清晰质量]
 * @return {[object]}           [图片源]
 */
function compress(sourceImg,scale,quality){
    var area = sourceImg.width * sourceImg.height,//源图片的总大小
        height = sourceImg.height * scale,
        width = sourceImg.width * scale,
        compressCvs = document.createElement("canvas");//压缩的图片画布
    //压缩的图片配置宽高
    compressCvs.width = width;
    compressCvs.height = height;
    var compressCtx = compressCvs.getContext("2d");
    //解决ios 图片大于2000000像素无法用drawImage的bug
    if(area > 2000000 && navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)){
        //瓦片绘制
        var smallCvs = document.createElement("canvas"),
            smallCtx = smallCvs.getContext("2d"),
            count = Math.ceil(area / 1000000),//分割的数量
            cvsWidth = width / count,//每个小canvas的宽度
            picWidth = sourceImg.width / count;//分割成小图片的宽度
        smallCvs.height = compressCvs.height;
        smallCvs.width =  width / count;
        //拼凑成大的canvas
        for(var i = 0;i < count;i ++){
            smallCtx.drawImage(sourceImg,i*picWidth,0,picWidth,sourceImg.height,0,0,cvsWidth,height);
            compressCtx.drawImage(smallCvs,i*cvsWidth,0,cvsWidth,height);
        }
    }else{
        compressCtx.drawImage(sourceImg,0,0,sourceImg.width,sourceImg.height,0,0,width,height);
    }
    //将canvas转换成base64
    return compressCvs.toDataURL("image/jpeg",quality/100);
}
function $(id){
    return document.getElementById(id);
}

将图片url转换为blob对象

/**
 * [dataURLtoBlob 将base64转换为blob对象]
 * @param  {[type]} dataurl [图片源base64]
 * @return {[object]}         [图片源blob对象]
 */
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

使用说明

这个只是一个移动端预览压缩上传图片实现的demo，会有一些兼容性和bug问题，大家可以自己修改和扩展

结束，撒花~~~

文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生更加美好……

超融合服务器 idc机房托管 H5移动端上传图片 php 预览上传图片上传图片预览php 图片上传服务器并预览

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60885.html

移动端预览压缩上传图片

摘要：移动端预览压缩上传图片推荐一个使用成熟的解决方案文章已同步我的笔记，欢迎大家加，加后人生更加美好原理介绍移动端图片上传，通过生成图片资源进行预览，通过进行图片的压缩，将图片转换成对象上传。移动端预览压缩上传图片推荐一个使用成熟的解决方案：https://github.com/think2011/... 文章已同步我的github笔记https://github.com/ymblog...

Chiclaim 2019-08-22 11:01 评论0 收藏0
移动端图片上传旋转、压缩的解决方案

摘要：上传的文件经过就可以实现预览图片了，这方面不清楚的可以查看进阶系列文件上传下载旋转旋转需要用到的方法。前言在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。 Orientatio...

blair 2019-08-20 17:38 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

摘要：本次的内容是图片的上传预览。待上传图像点击蓝色框内，可以选择文件，移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说，先上图。showImg(https://segmentfault.com/img...

NeverSayNever 2019-08-29 17:00 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

摘要：本次的内容是图片的上传预览。待上传图像点击蓝色框内，可以选择文件，移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说，先上图。showImg(https://segmentfault.com/img...

wums 2019-08-02 11:46 评论0 收藏0
图片上传预览转压缩并转base64详解（dShowImg64.js）

摘要：本次的内容是图片的上传预览。待上传图像点击蓝色框内，可以选择文件，移动端选择拍照或选择图片进行上传。部分请点击这层就是加号图像是转码后显示图像的地方。最后的预览图像地址以后会加入更多的小插件。 hello，大家好，游戏开始了，欢迎大家收看这一期的讲解。本次的内容是图片的上传预览。最后发源码链接。废话不多说，先上图。showImg(https://segmentfault.com/img...

zorro 2019-08-23 12:26 评论0 收藏0