H5js前端压缩图片

news/2024/7/19 13:26:07 标签: 图片压缩, H5, JS

1.压缩图片是通过canvas做到的。

具体原理【1】先获取图片的原始尺寸【2】确定压缩后的图片尺寸,(就是将图片尺寸都缩小达到压缩目的)【3】在canvas画布上重新画一遍这个缩小后尺寸的图片【4】把该图片转为blob格式进行发送或者其他进一步的处理。其中successF为成功后的回调函数。该方法是在uni-app中用的,所以先用的uni.getImageInfo获取原本的图片尺寸。这里需要注意的是,如果没有采用ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);这一步重画图片,直接到把canvas转为blob格式,会出现图片是全黑色的。必须通过drawImage方法重新绘制图片,才能得到压缩后的图片信息。

代码如下

xport function handleImage(src,type,successF){
    uni.getImageInfo({
            src: src,
            success: function (res) {
              let canvasWidth = res.width //图片原始长宽
              let canvasHeight = res.height;
              let base = canvasWidth/canvasHeight;
              if(canvasWidth>500){
                  canvasWidth = 500;
                  canvasHeight = Math.floor(canvasWidth/base);
              }
              //进行压缩
              let canvas = document.createElement('canvas');
              let ctx = canvas.getContext('2d');
              canvas.width = canvasWidth;
              canvas.height = canvasHeight;
              let img = new Image();
              img.src = src; // 要压缩的图片  
              //重画这个图片
              ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
              //转为blob格式发送
              canvas.toBlob( function(blob) {
                 const blobUrl = URL.createObjectURL(blob)
                 console.log("压缩后的bloburl:"+blobUrl)
                 successF(blobUrl)
              }, 'image/jpeg');
              },
              fail: (err) => {
                  reject('获取图片信息失败')
              }
              })
}

 


http://www.niftyadmin.cn/n/1584804.html

相关文章

调试相关连接资源

WinDbg 帮助文档翻译 http://www.cnitblog.com/cc682/articles/43272.html 本文转自einyboy博客园博客,原文链接:http://www.cnblogs.com/einyboy/archive/2012/05/06/2486502.html

Vue computed使用方法及使用原因总结

1.通过computed可以对{{}}里的数据进行处理。当然对数据进一步处理,通过写method方法也可以达到,为什么要通过computed的方式呢?这是因为computed的方法比method节约资源。 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生…

小版本大升级!NetScaler 12月版本

按照以往的规律,NetScaler的小版本,大概一个月有一次更新。经历了11月的沉默后,12月忽然突飞猛进。看版本发布说明,果然有了很大的改变。 首当其冲的是OS文件名称做了改变 New name format: build-12.0-56.20_nc_32.tgz新增加的32…

qiankun前端微应用项目使用说明

1、使用原因 项目越来越大,运行打包较慢(主要)。目前的前端项目使用vue架构,页面已经超过了100张,打包越来越慢,虽然已经进行了压缩处理,但是修改一个地方,重新编译全部,…

SSH 通过密钥登录

设置 SSH 通过密钥登录 我们一般使用 PuTTY 等 SSH 客户端来远程管理 Linux 服务器。但是,一般的密码方式登录,容易有密码被暴力破解的问题。所以,一般我们会将 SSH 的端口设置为默认的 22 以外的端口,或者禁用 root 账户登录。其…

iOS设计模式四部曲(一) 创建型模式 内附Demo

最近刚重温完经典书籍《EffectiveObjective-C2.0编写高质量iOS与OSX代码的52个有效方法》,接下来准备把设计模式扫扫盲,强烈推荐图书《Head First设计模式》,如果看完了有空可以翻翻《大话设计模式》或者《设计模式之禅》,这几篇就…

iOS开发中的一些技巧及代码片段

显示或隐藏Finder中的文件你想打开整个系统的隐藏文件可以在终端下输入以下命令: defaults write com.apple.finder AppleShowAllFiles -bool true 关闭显示隐藏功能 defaults write com.apple.finder AppleShowAllFiles -bool false killall Finder 重启Finder 使用终端查询代…

LAMP架构(nginx安装,默认虚拟主机,用户认证,域名重定向,nginx配置文件详解)...

一、安装nginx[rootlnmp conf]# wget http://nginx.org/download/nginx-1.8.0.tar.gz[rootlnmp conf]# tar zxvf nginx-1.8.0.tar.gz[rootlnmp conf]# cd nginx-1.8.0[rootlnmp conf]# ./configure --prefix/usr/local/nginx[rootlnmp conf]# make && make install[roo…