js/vue图片压缩

时间:2022-09-04 13:07:31

js版

  1. 新建compressImage.js,内容如下:
// 将base64转换为blob(有需要可加上,没需要可不加)
function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
} // 压缩图片
function compressImage(path, config, callback) {
var img = new Image()
img.src = path
img.onload = function() {
var that = this
var w = that.width
var h = that.height
var scale = w / h
w = config.width || (config.height * scale)
h = config.height || (config.width / scale)
var quality = 0.7 // 默认图片质量为0.7
// 生成canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// 创建属性节点
var anw = document.createAttribute("width")
anw.nodeValue = w
var anh = document.createAttribute("height")
anh.nodeValue = h
canvas.setAttributeNode(anw)
canvas.setAttributeNode(anh)
ctx.drawImage(that, 0, 0, w, h)
if (config.quality && config.quality <= 1 && config.quality > 0) {
quality = config.quality
}
var base64 = canvas.toDataURL('image/*', quality)
// 回调函数返回blob的值(若不需要,可直接返回base64的值)
callback(convertBase64UrlToBlob(base64))
}
}
  1. 在html文件中引入
<script src="./compressImage.js"></script> // 具体路径按自己存放的位置而定
  1. 使用:
compressImage(图片路径, {
width: 100, // 压缩后图片的宽
height: 200, // 压缩后图片的高,宽高若只传一个,则按图片原比例进行压缩
quality: 0.8 // 压缩后图片的清晰度,取值0-1,不传默认为0.7,值越小,所绘制出的图像越模糊
}, function(result){
console.log(result) // result即为压缩后的结果
})

vue版

  1. 新建compressImage.js,内容如下:
// 将base64转换为blob
export function convertBase64UrlToBlob(urlData) {
var arr = urlData.split(',')
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
} // 压缩图片
export function compressImage(path, config) {
return new Promise((resolve, reject) => {
var img = new Image()
img.src = path
img.onload = function() {
var that = this
var w = that.width
var h = that.height
var scale = w / h
w = config.width || config.height * scale
h = config.height || config.width / scale
var quality = 0.7 // 默认图片质量为0.7
// 生成canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// 创建属性节点
var anw = document.createAttribute('width')
anw.nodeValue = w
var anh = document.createAttribute('height')
anh.nodeValue = h
canvas.setAttributeNode(anw)
canvas.setAttributeNode(anh)
ctx.drawImage(that, 0, 0, w, h)
if (config.quality && config.quality <= 1 && config.quality > 0) {
quality = config.quality
}
var base64 = canvas.toDataURL('image/*', quality)
// var blob = convertBase64UrlToBlob(base64)
// 回调函数返回base64的值,也可根据自己的需求返回blob的值
resolve(base64)
}
})
}
  1. 在vue文件中引入
import { compressImage } from './compressImage' // 具体路径按自己存放的位置而定
  1. 使用:
compressImage(图片路径, {
width: 100, // 压缩后图片的宽
height: 200, // 压缩后图片的高,宽高若只传一个,则按图片原比例进行压缩
quality: 0.8 // 压缩后图片的清晰度,取值0-1,不传默认为0.7,值越小,所绘制出的图像越模糊
}).then(result => {
console.log(result) // result即为压缩后的结果
})

关于图片压缩后失真的修复可查看 vue图片压缩(不失真)

js/vue图片压缩的更多相关文章

  1. 使用HTML5的两个api,前端js完成图片压缩

    主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...

  2. Vue 图片压缩上传&colon; element-ui &plus; lrz

    步骤 安装依赖包 npm install --save lrz 在main.js里引入 import lrz from 'lrz' 封装 compress函数 封装上传组件 upload-image ...

  3. 利用HTML5,前端js实现图片压缩

    http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnav ...

  4. js 前端图片压缩&plus;ios图片角度旋转

    step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...

  5. js 实现图片压缩并转换成base64&lpar;data&colon;image&sol;jpeg&semi;base64&rpar;格式

    <!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...

  6. js canvas图片压缩

    function preview_picture(pic){ var r=new FileReader(); r.readAsDataURL(pic); r.onload=function(e){ d ...

  7. vue 图片压缩 基于cli3 配置

    chainWebpack: config => { const imagesRule = config.module.rule('images') imagesRule .use('image- ...

  8. 图片压缩(js压缩,底部有vue压缩图片依赖使用的教程链接)

    directTurnIntoBase64(fileObj, callback) { var r = new FileReader(); // 转成base64 r.onload = function( ...

  9. 基于vue &plus; axios &plus; lrz&period;js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

随机推荐

  1. python之最强王者(9)——函数

    1.Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但 ...

  2. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  3. c&num; 指定的存储区提供程序在配置中找不到,或者无效

    <system.data> <DbProviderFactories> <remove invariant="System.Data.SQLite"/ ...

  4. 素数筛 poj 3518

    给你一个n 求包括n的一个非素数区间有多长 +1输出 #include<stdio.h> #include<string.h> #include<algorithm&gt ...

  5. PostMessage与SendMessage各自的问题

     深入解析SendMessage.PostMessage 本文将使用C++语言,在MFC框架的配合下给出PostMessage.SendMessage等的使用方式与使用不当造成的后果(讨论均针对自定义 ...

  6. uva 357 Let Me Count The Ways&lpar;01背包)

    题目连接:357 - Let Me Count The Ways 题目大意:有5种硬币, 面值分别为1.5.10.25.50,现在给出金额,问可以用多少种方式组成该面值. 解题思路:和uva674是一 ...

  7. C&num;通过接口与线程通信&lpar;捕获线程状态&rpar;介绍

    C#通过接口与线程通信(捕获线程状态)介绍 摘要:本文介绍C#通过接口与线程通信(捕获线程状态),并提供简单的示例代码供参考. 提示:本文所提到的线程状态变化,并不是指线程启动.暂停.停止,而是说线程 ...

  8. stl 生产全排列 next&lowbar;permutation

    #include<stdio.h>#include<algorithm>using namespace std;int main(){ int n,p[10]; scanf(& ...

  9. 电脑突然使用不了复制粘贴快捷键,Ctrl&plus;C和Ctrl&plus;V没用

    今天不知道怎么回事,在复制代码的时候突然用不了Ctrl+C和Ctrl+V了 刚开始我还以为是eclipse出问题,然后我在idea中是可以复制 和 粘贴的,然后我又打开文本编辑器notepad++,发 ...

  10. LAMP分离搭建WordPress

    实验环境:centos6.5 php5.3.6 http2.4.35 yum安装mysql 关闭三台主机的Selinux.iptalbes 配置apache: 解压软件包 安装依赖包:pcre-dev ...