精华内容
下载资源
问答
  • js压缩图片
    2022-04-07 14:37:56

    let canvas = document.createElement('canvas') // 创建Canvas对象(画布)

    let context = canvas.getContext('2d')

    let img = new Image()

    img.src = photoArr[i].content // 指定图片的DataURL(图片的base64编码数据)

    img.onload = () =>{

            canvas.width = img.width

            canvas.height = img.height

            context.drawImage(img, 0, 0, canvas.width, canvas.height)

            if(photoArr[i].file.size/1024>2048){//如果图片大小大于2M

                    photoArr[i].content = canvas.toDataURL(photoArr[i].file.type, 0.92)

            // 0.92为默认压缩质量 type为image格式 如jpg、png

            }

            console.log(photoArr[i].content);

    }

    更多相关内容
  • layer+压缩图片js

    2017-06-23 01:27:55
    前端js压缩图片插件,使用方法见博客文章
  • 图片通过js代码压缩,通过base64压缩图片,修改图片质量或尺寸达到压缩图片体积
  • 主要为大家详细介绍了JS实现异步上传压缩图片,并立即显示图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 前端JS实现图片压缩,直接浏览器打开后,选择要压缩图片文件即可
  • 为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端...
  • 主要介绍了JS移动端/H5同时选择多张图片上传并使用canvas压缩图片,需要的朋友可以参考下
  • js压缩图片代码

    2018-10-19 17:39:24
    1M以内的0.1秒左右压缩完成,10M以内1点几秒压缩完成 blob/base64格式上传
  • #图片无损压缩指令 文件夹操作(非图片文件直接拷贝) nej-minimage ./test/directory/res/ -f nej-minimage -i=./test/directory/res/ -f nej-minimage -i=./test/directory/res/ -o=./test/directory/output/ 文件...
  • js图片压缩插件

    2017-06-30 17:11:46
    现在手机拍照因为图片太大,导致上传很慢,可以通过js压缩图片大小后再上传,此插件可以压缩图片大小
  • 主要介绍了通过js实现压缩图片上传功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • JavaScript 压缩图片

    2022-01-18 18:23:15
    所以,需要对图片进行压缩处理来优化上传功能。 图片压缩函数: /* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ...

    上传图片时候,遇到要上传很大的图片,上传的时候就会很慢。所以,需要对图片进行压缩处理来优化上传功能。

    图片压缩函数:

    /* 
     * 图片压缩
     * img    原始图片
     * width   压缩后的宽度
     * height  压缩后的高度
     * ratio   压缩比率 
     */
     function compress(img, width, height, ratio) {        
       var canvas, ctx, img64;
            
       canvas = document.createElement('canvas');        
       canvas.width = width;
       canvas.height = height;
            
       ctx = canvas.getContext("2d");        
       ctx.drawImage(img, 0, 0, width, height);
            
       img64 = canvas.toDataURL("image/jpeg", ratio);
            
       return img64;
     }
    

    图片压缩函数,返回 base64 格式的图片数据。 其中压缩比率ratio取值(0 - 1 之间),ratio越大图片质量越高。

    这里将图片转为 jpeg格式,因为转为 png 格式的话,图片的 base64 比转为 jpeg 的要长不少。

    <input type="file" accept="image/*" name="imageFile" @change="upload">
    

    上传图片后 @change绑定的upload 函数将被触发,在这个函数中获取到图片的资源,将它压缩并利用canvas绘制出来。

      upload () {
       let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件,这里是图片类型
       let reader = new FileReader()
       reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
       reader.onload = (e) => { // 文件读取完成时触发
        let result = e.target.result // base64格式图片地址
        var image = new Image()
        image.src = result // 设置image的地址为base64的地址
        image.onload = () => { // 图片加载完成后才能进行压缩处理,从而转换为base64 进行赋值
        let width = image.width // 图片宽度
        let height = image.height
        let dataUrl = this.compress(image, width, height, 0.7)
        document.getElementById("test").src = dataUrl
       }
       }
      }
    

    压缩图片结果对比:
    大小对比:
    在这里插入图片描述
    分辨率对比:
    在这里插入图片描述
    压缩2M的图片:

    大小对比:
    在这里插入图片描述

    分辨率对比:
    在这里插入图片描述

    demo完整版代码:

    <template>
      <div>
      <input type="file" accept="image/*" name="imageFile" @change="upload">
        <img id="test" crossorigin alt="">
     </div>
    </template>
    <script>
    export default {
     name: '',
     data () {
      return {
      }
     },
     components: {
     },
     created () {
     },
     methods: {
      upload () {
       let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件,这里是图片类型
       let reader = new FileReader()
       reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
       reader.onload = (e) => { // 文件读取完成时触发
        let result = e.target.result // base64格式图片地址
        var image = new Image()
        image.src = result // 设置image的地址为base64的地址
        image.onload = () => { // 图片加载完成后才能进行压缩处理,从而转换为base64 进行赋值
        let width = image.width // 图片宽度
        let height = image.height
        let dataUrl = this.compress(image, width, height, 0.7)
        document.getElementById("test").src = dataUrl
       }
       }
      },
      /*
       * 图片压缩
       * img   原始图片
       * width  压缩后的宽度
       * height  压缩后的高度
       * ratio  压缩比率
      */
      compress (img, width, height, ratio) {
       let canvas, ctx, img64;
       canvas = document.createElement('canvas')
       canvas.width = width;
       canvas.height = height;
       ctx = canvas.getContext("2d");
       ctx.drawImage(img, 0, 0, width, height);
       img64 = canvas.toDataURL("image/jpeg", ratio);
       return img64;
      }
     }
    }
    </script>
    
    <style lang="less" scoped>
    </style>
    
    展开全文
  • JS图片压缩

    2022-01-13 15:46:00
    原生JS压缩图片 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js压缩图片</title> </head> <body> <img id="img" src=""> <...

    原生JS压缩图片

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>js压缩图片</title>
    	</head>
    	<body>
    		<img id="img" src="">
    		<input id="file" type="file" onchange="upload()">
    	</body>
    	<script>
    		async function upload() {
    			let fileObj = document.getElementById('file').files[0] //上传文件的对象
    			let initSize = (fileObj.size / 1024).toFixed(2)
    			let reader = new FileReader()
    			reader.readAsDataURL(fileObj)
    			reader.onload = function(e) {
    				let image = new Image() //新建一个img标签
    				image.src = e.target.result
    				image.onload = function() {
    					let setImg = compressImg(image, fileObj)
    					document.getElementById('img').src = setImg
    					//如果原图小于压缩后的就长传压缩图
    					if (getImgSize(setImg) < (initSize*1024)) {
    						console.log('长传压缩后的图片')
    					} else {
    						console.log('长传原图')
    					}
    				}
    			}
    		}
    		// 对图片进行压缩
    		function compressImg(img, fileObj, quality = 0.7, width = 1, height = 1) {
    			let canvas = document.createElement('canvas'),
    				context = canvas.getContext('2d'),
    				imageWidth = img.width / width,
    				imageHeight = img.height / height,
    				result = '';
    			canvas.width = imageWidth
    			canvas.height = imageHeight
    			context.drawImage(img, 0, 0, imageWidth, imageHeight)
    			result = canvas.toDataURL('image/jpeg', quality)
    			return result
    		}
    
    		function getImgSize(base64url) {
    			//获取base64图片大小,
    			var str = base64url.replace('data:image/jpeg;base64,', ''); //这里根据自己上传图片的格式进行相应修改
    			var strLength = str.length;
    			var fileLength = parseInt(strLength - (strLength / 8) * 2);
    			// 由字节转换为Kb
    			var size = "";
    			size = (fileLength / 1024).toFixed(2)
    			return parseInt(size);
    		}
    	</script>
    </html>
    
    
    
    
    展开全文
  • 1.运用 canvas 实现 图片上传压缩 2.包含 将图片转为Base64位 以及转为Blob对象
  • js压缩图片上传插件

    2016-06-21 20:01:59
    js图片压缩功能,减少上传带宽资源
  • JS压缩图片的简单代码
  • JS 压缩图片

    2021-09-10 12:39:04
    由于用户上传的图片大小不固定,为了节约带宽,前端需要做个图片压缩再上传到服务器。 注意:本文中图片压缩方法只能将压缩后的图片固定保存为 “image/jpeg” 格式,不能设置为 “image/png” 格式(该格式压缩无效...

    由于用户上传的图片大小不固定,为了节约带宽,前端需要做个图片压缩再上传到服务器。

    注意:本文中图片压缩方法只能将压缩后的图片固定保存为 “image/jpeg” 格式,不能设置为 “image/png” 格式(该格式压缩无效)。

    具体代码如下

    压缩相关的方法:

    /**
     * 文件转base64
     * @param {File} file 需要转换的文件
     * @param {Function} callback 回调函数, 执行回调后返回 base64 格式图片
     */
    export function imageToBase64(file, callback) {
      const reader = new FileReader()
      reader.readAsDataURL(file) // 文件转base64
      reader.addEventListener('load', e => {
        callback && callback(e.target.result)
      })
    }
    
    /**
     * base64 类型转 Blob 类型
     * @param {base64} base64
     * @returns {Blob} blob
     */
    export function base64ToBlob(base64) {
      let arr = base64.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 })
    }
    
    /**
     * 压缩图片
     * @param {base64} originalImage 转换为 base64 的原始图片
     * @param {Number} compressRatio 压缩比例 0 - 1, 1则不压缩
     * @param {Function} callback 回调方法, 执行回调后返回 base64 格式图片
     */
    export function compressImg(originalImage, compressRatio = 1, callback) {
      const image = new Image()
      image.src = originalImage
    
      /* 监听图片的load事件 */
      image.addEventListener('load', function() {
        let [sizeRatio, maxWidth, maxHeight] = [0, 1024, 1024] // 图片压缩宽高比例和最大宽高
        let [imageWidth, imageHeight] = [this.naturalWidth, this.naturalHeight] // 图片实际宽高
        let compressFlag = false // 图片是否需要压缩
    
        // 如果图片宽度大于最大宽度就等比压缩图片的高度
        if (imageWidth > maxWidth) {
          compressFlag = true
          sizeRatio = imageWidth / maxWidth
          maxHeight = imageHeight / sizeRatio
        }
    
        // 如果图片高度大于最大高度就等比压缩图片的宽度
        if (imageHeight > maxHeight) {
          compressFlag = true
          sizeRatio = imageHeight / maxHeight
          maxWidth = imageWidth / sizeRatio
        }
    
        // 如果不需要压缩
        if (!compressFlag) {
          maxWidth = imageWidth
          maxHeight = imageHeight
        }
    
        // 使用canvas压缩图片
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
    
        canvas.setAttribute('id', 'canvas')
        canvas.width = maxWidth
        canvas.height = maxHeight
        ctx.clearRect(0, 0, maxWidth, maxHeight) // 清除画布内所有像素
        ctx.drawImage(image, 0, 0, maxWidth, maxHeight) // canvas绘制当前图片
        const compressImage = canvas.toDataURL('image/jpeg', compressRatio) // 设置压缩类型和压缩比例获取压缩后的文件, 为 base64
    
        callback && callback(compressImage)
      })
    }
    

    业务中使用,我这里用的 vue,这里只展示了部分代码(大家只需关注 isCompressImg 方法)

    
        beforeRead(file) {
          if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
            this.$toast('请上传 jpg 或 png 格式图片')
            return false
          }
          return true
        },
        afterRead(file) {
          file.status = 'uploading'
          file.message = '上传中...'
          this.btnDisabled = true
          const imgFile = file.file
          this.isCompressImg(imgFile, img => {
            // 此时可以自行将文件上传至服务器
            alyOSS
              .ossUploadFile({ file: img })
              .then(res => {
                this.fileList = [
                  {
                    url: res.url
                  }
                ]
                file.status = 'done'
                file.message = ''
              })
              .catch(() => {
                file.status = 'failed'
                file.message = '上传失败'
              })
              .finally(() => {
                this.btnDisabled = false
              })
          })
        },
        // 判断是否需要压缩
        isCompressImg(file, callback) {
          const maxSize = 1 * 1024 * 1024 // 最大 1M
          // 压缩图片
          if (file.size > maxSize) {
            imageToBase64(file, originalImage => {
              compressImg(originalImage, 0.5, compressImage => {
                // base64 转 blob, blob 再转 file
                const img = new File([base64ToBlob(compressImage)], file.name, {
                  type: file.type
                })
                // 递归判断, 防止压缩后的图片仍然大于 1M
                this.isCompressImg(img, f => {
                  callback(f)
                })
              })
            })
          } else {
            callback(file)
          }
        },
    
    展开全文
  • js图片压缩上传

    2015-05-07 14:37:15
    本人亲自测试,可以用,先压缩图片大小,再上传,可自定义宽高
  • 在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合...每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResize
  • js图片压缩

    热门讨论 2013-07-24 10:34:49
    很好用的图片压缩,不会影响图片质量,好用,希望能帮到某些朋友
  •  如上图所示,点击上传图片按钮,调用手机摄像头拍照功能。   <input onchange=”[removed]imgFun.uploadPicture();” type=”file” name=”file” id=”file” accept=”image/*” capture=”camera” style...
  • JS压缩图片

    2020-08-16 13:21:06
    js-image-compressor 是一个实现轻量级图片压缩javascript 库,压缩后仅有 5kb,在前端页面即可实现对图片压缩。在提供基本图片压缩功能同时,还暴露出图片处理相关公用方法,以及进行边界情况处理: 可以对待...
  • <template> <div class="container"> <input type="file" id="input-img" @change="compress" /&...下载图片</a> <!-- <button @click="downloadImg">兼容 IE 下载</button> .
  • 前端使用js压缩图片

    2020-10-22 15:40:20
    这个方法可以将传入的图片信息,压缩至3M以下,并返回base64信息; $scope.myReadAsDataURL = function (file) { return new Promise(function (resolve, reject) { // 最终base64 var resultImg = ''; var _...
  • 主要介绍了Vue.js 2.0 移动端拍照压缩图片上传预览功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • H5 上传图片 拍照 压缩图片 上传 form 表单提交,直接请求接口就可以了,下载了就能用,自己定义接口请求,实测绝对可用,不能用打我
  • 本文实例讲述了JS 图片压缩原理与实现方法。分享给大家供大家参考,具体如下: 前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 ...
  • 一个html文件,里面包含了移动端解决图片上传预览的时候图片旋转的问题,顺便对图片进行了压缩,但是压缩值正对文件大的图片有效。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,053
精华内容 43,221
关键字:

压缩图片js