压缩图片js

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压缩图片，js图片base64压缩上传
2019-04-19 16:45:01

图片通过js代码压缩，通过base64压缩图片，修改图片质量或尺寸达到压缩图片体积

收起
JS实现异步上传压缩图片
2020-10-19 23:43:05

主要为大家详细介绍了JS实现异步上传压缩图片，并立即显示图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起
前端JS实现图片压缩，简易好用版
2017-11-15 17:54:07

前端JS实现图片压缩，直接浏览器打开后，选择要压缩的图片文件即可

收起
JavaScript前端实现压缩图片功能
2020-11-21 10:35:27

为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能，本来这个功能并不复杂，只需要将图片文件通过axios传到服务端即可，但是考虑到现在手机设配的拍照功能十分强大，随便一张照片都能动辄五六兆，而服务端...

收起
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2020-10-19 16:16:50

主要介绍了JS移动端/H5同时选择多张图片上传并使用canvas压缩图片,需要的朋友可以参考下

收起
js压缩图片代码
2018-10-19 17:39:24

1M以内的0.1秒左右压缩完成，10M以内1点几秒压缩完成 blob/base64格式上传

收起
JS图片无损压缩工具.zip
2020-07-24 09:57:37

#图片无损压缩指令文件夹操作(非图片文件直接拷贝) 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实现压缩图片上传功能
2020-10-15 14:51:18

主要介绍了通过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>

收起

展开全文

前端 html5

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>

收起

展开全文

前端 html5

JS图片压缩上传 canvas 压缩图片
2020-03-02 17:26:55

1.运用 canvas 实现图片上传压缩 2.包含将图片转为Base64位以及转为Blob对象

收起
js压缩图片上传插件
2016-06-21 20:01:59

js图片压缩功能，减少上传带宽资源

收起
JS压缩图片的简单代码
2021-01-05 17:41:16

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)
      }
    },

收起

展开全文

html5

js图片压缩上传
2015-05-07 14:37:15

本人亲自测试，可以用,先压缩图片大小，再上传，可自定义宽高

收起
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2020-11-27 05:38:22

在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合...每次拍照或选择一张图片-然后压缩图片-预览上传。上传图片压缩插件是localResize

收起
js图片压缩
热门讨论 2013-07-24 10:34:49

很好用的图片压缩，不会影响图片质量，好用，希望能帮到某些朋友

收起
js 压缩图片的示例（只缩小体积，不更改图片尺寸）
2021-01-21 10:58:50

　如上图所示，点击上传图片按钮，调用手机摄像头拍照功能。　<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，在前端页面即可实现对图片的压缩。在提供基本图片压缩功能同时，还暴露出图片处理相关公用方法，以及进行边界情况处理：可以对待...

收起
JavaScript 使用canvas压缩图片
2021-12-30 14:40:12

<template> <div class="container"> <input type="file" id="input-img" @change="compress" /&...下载图片</a> <!-- <button @click="downloadImg">兼容 IE 下载</button> .

收起

前端 css3
前端使用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 移动端拍照压缩图片上传预览功能
2020-10-20 06:40:48

主要介绍了Vue.js 2.0 移动端拍照压缩图片上传预览功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下

收起
h5上传压缩图片Image.rar
2020-11-18 15:11:04

H5 上传图片拍照 压缩图片 上传 form 表单提交，直接请求接口就可以了，下载了就能用，自己定义接口请求，实测绝对可用，不能用打我

收起
JS 图片压缩原理与实现方法详解
2020-11-20 20:25:44

本文实例讲述了JS 图片压缩原理与实现方法。分享给大家供大家参考，具体如下：前言说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具 PPDuck3， JS 实现类的有插件 ...

收起
Js移动端解决图片旋转问题已经对图片的压缩
2020-11-10 16:19:48

一个html文件，里面包含了移动端解决图片上传预览的时候图片旋转的问题，顺便对图片进行了压缩，但是压缩值正对文件大的图片有效。

收起

layer+压缩图片js

js压缩图片，js图片base64压缩上传

JS实现异步上传压缩图片

前端JS实现图片压缩，简易好用版

JavaScript前端实现压缩图片功能

JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

js压缩图片代码

JS图片无损压缩工具.zip

js图片压缩插件

通过js实现压缩图片上传功能

JavaScript 压缩图片

JS图片压缩

原生JS压缩图片

JS图片压缩上传 canvas 压缩图片

js压缩图片上传插件

JS压缩图片的简单代码

JS 压缩图片

js图片压缩上传

Vue.js 2.0 移动端拍照压缩图片预览及上传实例

js图片压缩

js 压缩图片的示例（只缩小体积，不更改图片尺寸）

JS压缩图片

JavaScript 使用canvas压缩图片

前端使用js压缩图片

Vue.js 2.0 移动端拍照压缩图片上传预览功能

h5上传压缩图片Image.rar

JS 图片压缩原理与实现方法详解

Js移动端解决图片旋转问题已经对图片的压缩

压缩图片js