3种常用的图片压缩方法

3种常用的图片压缩方法3种常用的图片压缩方法:把图片上传到阿里云或七牛云,借用云端的图片缩放技术进行压缩。后端对图片尺寸大小进行压缩。前端用Canvas作为媒介压缩图片。作为一名前端攻城狮,主要介绍用Canvas作为媒介压缩图片。…

大家好,又见面了,我是你们的朋友全栈君。

3种常用的图片压缩方法:

  1. 把图片上传到阿里云或七牛云,借用云端的图片缩放技术进行压缩。阿里云文档

  2. 后端对图片尺寸大小进行压缩。

     3. 前端用 Canvas 作为媒介压缩图片。

作为一名前端攻城狮,主要介绍用 Canvas 作为媒介压缩图片。

用 Canvas 作为媒介压缩图片

思路:

  • <input type=”file”/>获取二进制图片
  • FileReader 把二进制图片转换成base64格式
  • base64格式可用于生成 Image 对象
  • 把图片绘制成 Canvas(这一步可以对图片尺寸进行压缩,这一步压缩效率最高,图片尺寸是最影响图片大小的)
  • Canvas 再转成 base64 图片(这一步可以对图片质量进行压缩)
  • Canvas 转成 Blob 格式(可用于上传)

js压缩图片并上传(react版)

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url: ''
        }
    }

    changeFile (event) {
        var _this = this;

        // 选择的文件对象(file里只包含图片的体积,不包含图片的尺寸)
        var file = event.target.files[0];
        console.log(file)

        // 选择的文件是图片
        if(file.type.indexOf("image") === 0) {
            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(),
                //创建一个img对象
                img = new Image();

            reader.readAsDataURL(file);
            // 文件base64化,以便获知图片原始尺寸
            reader.onload = function(e) {
                img.src = e.target.result;
            };

            // base64地址图片加载完毕后执行
            img.onload = function () {
                // 缩放图片需要的canvas(也可以在DOM中直接定义canvas标签,这样就能把压缩完的图片不转base64也能直接显示出来)
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');

                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;

                // 最大尺寸限制,可通过设置宽高来实现图片压缩程度
                var maxWidth = 300,
                    maxHeight = 300;
                // 目标尺寸
                var targetWidth = originWidth,
                    targetHeight = originHeight;
                // 图片尺寸超过300x300的限制
                if(originWidth > maxWidth || originHeight > maxHeight) {
                    if(originWidth / originHeight > maxWidth / maxHeight) {
                        // 更宽,按照宽度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }
                // canvas对图片进行缩放
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                // 清除画布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 图片压缩
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
                /*第一个参数是创建的img对象;第二三个参数是左上角坐标,后面两个是画布区域宽高*/

                //压缩后的图片转base64 url
                /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
                 * qualityArgument表示导出的图片质量,只有导出为jpeg和webp格式的时候此参数才有效,默认值是0.92*/
                var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式

                _this.setState({
                    url: newUrl
                })

                //也可以把压缩后的图片转blob格式用于上传
                // 语法:canvas.toBlob(callback, mimeType, qualityArgument)
                canvas.toBlob((blob)=>{
                     console.log(blob)
                // 图片ajax上传
                     var xhr = new XMLHttpRequest();
                     xhr.open("POST", 'upload.php', true);
                     xhr.send(blob);  
                }, 'image/jpeg', 0.92)
            };
        } else {
            alert('请上传图片格式');
        }
    }

    render() {
        let { url } = this.state;

        return (
            <div>
                <input id="file" type="file" onChange={this.changeFile.bind(this)}/>
                <img id="preview" src={ url } alt="" />
            </div>
        )
    }
}

总结:图片 -> Canvas -> 图片

微信小程序压缩图片并上传

<!--wxml-->
<button bindtap="chooseImg">选择图片</button>
<canvas canvas-id="firstCanvas" style="width:{
  
  { imgWidth }}px; height:{
  
  { imgHeight }}px;"></canvas>
Page({
  data: {
     imgWidth: 0,
     imgHeight: 0
  },
  chooseImg () {
        let _this = this;
        // 从本地相册选择图片或使用相机拍照
        wx.chooseImage({
            count: 1, // 最多可以选择的图片张数
            success (res) {
                const ctx = wx.createCanvasContext('firstCanvas');
                let path = res.tempFilePaths[0];

                wx.getImageInfo({
                    src: path,
                    success (res) {
                        console.log(res)

                        // 图片原始尺寸
                        let originWidth = res.width;
                        let originHeight = res.height;
                        // 最大尺寸限制,可通过设置宽高来实现图片压缩程度
                        let maxWidth = 200,
                            maxHeight = 150;
                        // 目标尺寸
                        let targetWidth = originWidth,
                            targetHeight = originHeight;
                        // 图片尺寸超过200x150的限制
                        if(originWidth > maxWidth || originHeight > maxHeight) {
                            if(originWidth / originHeight > maxWidth / maxHeight) {
                                // 更宽,按照宽度限定尺寸
                                targetWidth = maxWidth;
                                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                            } else {
                                targetHeight = maxHeight;
                                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                            }
                        }
                        // canvas对图片进行缩放
                        _this.setData({
                            imgWidth: targetWidth,
                            imgHeight: targetHeight
                        })

                        // 压缩图片(绘制图像到画布)
                        ctx.drawImage(path,0,0,targetWidth,targetHeight);

                        ctx.draw(false, ()=>{
                            // canvas导出为图片路径
                            wx.canvasToTempFilePath({
                                canvasId: 'firstCanvas',
                                fileType: 'jpg', //支持jpg或png
                                quality: 0.92, //图片质量
                                success(res) {
                                    let path = res.tempFilePath;

                                    // 保存图片到系统相册
                                    wx.saveImageToPhotosAlbum({
                                        filePath: path,
                                        success () {
                                            console.log('保存到本地相册成功!')
                                        },
                                        fail () {
                                            console.log('保存到本地相册失败!')
                                        }
                                    })

                                    // 上传压缩过的图片
                                    http.upload_file('/pic/uploadPic', path, 'file', (res)=>{})
                                },
                                fail(err) {
                                    console.log(err);
                                }
                            })
                        });
                    }
                })
            }
        })
    }
})

四、结束语

“图片水印合成”,实际上所使用的技术和套路和本文是如出一辙的,也是“图片→canvas水印→图片”三步曲,区别在于水印合成是连续执行两次context.drawImage()方法,一次是原图一次水印图片,其他代码逻辑和原理都是一样的。

由此及彼,利用同样的原理和代码逻辑,我们还可以实现其它很多以前前端不太好实现的功能,比方说图片的真剪裁效果,所谓“真剪裁”指不是使用个overflow:hidden或者clip这些CSS属性的“伪剪裁”,而是真正意义上就这么大区域图片信息。甚至配合一些前端算法,我们可以直接在前端进行人脸识别,图片自动美化等一系列功能再上传等等。

原理都是一样的,都是利用canvas作为中间媒介进行处理。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150440.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号