找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发移动端上传预览压缩图片

2018-11-30 分类：教程 阅读(554) 评论(0)
软件开发小公司有前端几个
前端开发软件快捷键
前端开发软件ws

一、功能和问题解析

1、图片上传，在移动端可以使用input为file，通过base64上传图片
2、移动端file有兼容上的问题
3、 移动端端图片都是几M，必须压缩

二、功能的实现和问题的解决

1、 移动端file有兼容上的问题的解决
<input type=”file” id=”upload” class=”upload” accept=”image/*” multiple />
这样可以解决点击调用相册的问题
2、上传图片、预览并且图片压缩
方法为：把图片变成base64位，使用canvas进行压缩，不过在ios中图片大于2000000像素就无法使用canvas压缩，就需要瓦片绘制。
代码如下
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>Document</title>
        <style>
            .add {
                width: 100%;
                height: 100%;
                text-align: center;
                border: 1px solid #ccc;
            }
            .img-box {
                position: relative;
                display: inline-block;
                margin: 10px 0px;
                width: 80px;
                height: 80px;
                color: #999;
            }
            .upload {
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            .add span {
                display: inline-block;
                margin-top: 28px;
            }
            .img-box img {
                display: none;
                width: 100%;
                height: 80px;
                object-fit: cover;
            }
        </style>
    </head>
    <body>
        <div>
            <label for=”upload”>照片</label>
            <div class=”img-box”>
                <div class=”add” id=”add”><span>+</span></div>
                <img src=”” id=”pic” />
                <input
                    type=”file”
                    id=”upload”
                    class=”upload”
                    accept=”image/*”
                    multiple
                />
            </div>
        </div>
        <script>
            var upload = document.getElementById(‘upload’), //上传
                pic = document.getElementById(‘pic’), //图片
                addBox = document.getElementById(‘add’), //空图片样式
                maxsize = 100 * 1024, //超过100k进行压缩
                minSrc = ” //
            if (typeof FileReader === ‘undefined’) {
                alert(
                    ‘抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！’,
                )
                upload.setAttribute(‘disabled’, ‘disabled’)
            }
            upload.addEventListener(‘change’, function() {
                addBox.style.display = ‘none’
                pic.style.display = ‘block’
                var file = this.files[0],
                    result = ”,
                    reader = new FileReader()
                if (file) {
                    pic.setAttribute(‘src’, ‘loading.gif’)
                }
                reader.readAsDataURL(file)
                reader.onload = function(e) {
                    var v = this.result //获取到base64的图片
                    img = new Image()
                    img.src = v
                    //大于100k图片进行压缩
                    if (v.length >= maxsize) {
                        img.onload = function() {
                            minSrc = compress(img, 0.8, 100)
                            pic.setAttribute(‘src’, minSrc)
                            //ajax minSrc
                        }
                    } else {
                        pic.setAttribute(‘src’, v)
                        //ajax v
                    }
                }
            })
            function compress(sourceImg, proportion, quality) {
                var area = sourceImg.width * sourceImg.height, //源图片的总大小
                    height = sourceImg.height * proportion,
                    width = sourceImg.width * proportion,
                    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,
                    )
                }
                var newUrl = compressCvs.toDataURL(‘image/jpeg’, quality / 100)
                return newUrl
            }
        </script>
    </body>
</html>
软件开发前端工资待遇
前端_安全_软件开发
web前端中文版开发软件下载
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论