js版
- 新建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))
}
}
- 在html文件中引入
<script src="./compressImage.js"></script> // 具体路径按自己存放的位置而定
- 使用:
compressImage(图片路径, {
width: 100, // 压缩后图片的宽
height: 200, // 压缩后图片的高,宽高若只传一个,则按图片原比例进行压缩
quality: 0.8 // 压缩后图片的清晰度,取值0-1,不传默认为0.7,值越小,所绘制出的图像越模糊
}, function(result){
console.log(result) // result即为压缩后的结果
})
vue版
- 新建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)
}
})
}
- 在vue文件中引入
import { compressImage } from './compressImage' // 具体路径按自己存放的位置而定
- 使用:
compressImage(图片路径, {
width: 100, // 压缩后图片的宽
height: 200, // 压缩后图片的高,宽高若只传一个,则按图片原比例进行压缩
quality: 0.8 // 压缩后图片的清晰度,取值0-1,不传默认为0.7,值越小,所绘制出的图像越模糊
}).then(result => {
console.log(result) // result即为压缩后的结果
})
关于图片压缩后失真的修复可查看 vue图片压缩(不失真)
js/vue图片压缩的更多相关文章
-
使用HTML5的两个api,前端js完成图片压缩
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...
-
Vue 图片压缩上传: element-ui + lrz
步骤 安装依赖包 npm install --save lrz 在main.js里引入 import lrz from 'lrz' 封装 compress函数 封装上传组件 upload-image ...
-
利用HTML5,前端js实现图片压缩
http://blog.csdn.NET/qazwsx2345/article/details/21827553 主要用了两个HTML5的 API,一个file,一个canvas,压缩主要使用cnav ...
-
js 前端图片压缩+ios图片角度旋转
step1:读取选择的图片,并转为base64: function ImgToBase64 (e, fn) { // 图片方向角 //fn为传入的方法函数,在图片操作完成之后执行 var Orient ...
-
js 实现图片压缩并转换成base64(data:image/jpeg;base64)格式
<!DOCTYPE html> <html> <head> <!--by 0o晓月メ http://www.cnblogs.com/final-elysion ...
-
js canvas图片压缩
function preview_picture(pic){ var r=new FileReader(); r.readAsDataURL(pic); r.onload=function(e){ d ...
-
vue 图片压缩 基于cli3 配置
chainWebpack: config => { const imagesRule = config.module.rule('images') imagesRule .use('image- ...
-
图片压缩(js压缩,底部有vue压缩图片依赖使用的教程链接)
directTurnIntoBase64(fileObj, callback) { var r = new FileReader(); // 转成base64 r.onload = function( ...
-
基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
随机推荐
-
python之最强王者(9)——函数
1.Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但 ...
-
ReactJs笔记
中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html
-
c# 指定的存储区提供程序在配置中找不到,或者无效
<system.data> <DbProviderFactories> <remove invariant="System.Data.SQLite"/ ...
-
素数筛 poj 3518
给你一个n 求包括n的一个非素数区间有多长 +1输出 #include<stdio.h> #include<string.h> #include<algorithm> ...
-
PostMessage与SendMessage各自的问题
深入解析SendMessage.PostMessage 本文将使用C++语言,在MFC框架的配合下给出PostMessage.SendMessage等的使用方式与使用不当造成的后果(讨论均针对自定义 ...
-
uva 357 Let Me Count The Ways(01背包)
题目连接:357 - Let Me Count The Ways 题目大意:有5种硬币, 面值分别为1.5.10.25.50,现在给出金额,问可以用多少种方式组成该面值. 解题思路:和uva674是一 ...
-
C#通过接口与线程通信(捕获线程状态)介绍
C#通过接口与线程通信(捕获线程状态)介绍 摘要:本文介绍C#通过接口与线程通信(捕获线程状态),并提供简单的示例代码供参考. 提示:本文所提到的线程状态变化,并不是指线程启动.暂停.停止,而是说线程 ...
-
stl 生产全排列 next_permutation
#include<stdio.h>#include<algorithm>using namespace std;int main(){ int n,p[10]; scanf(& ...
-
电脑突然使用不了复制粘贴快捷键,Ctrl+C和Ctrl+V没用
今天不知道怎么回事,在复制代码的时候突然用不了Ctrl+C和Ctrl+V了 刚开始我还以为是eclipse出问题,然后我在idea中是可以复制 和 粘贴的,然后我又打开文本编辑器notepad++,发 ...
-
LAMP分离搭建WordPress
实验环境:centos6.5 php5.3.6 http2.4.35 yum安装mysql 关闭三台主机的Selinux.iptalbes 配置apache: 解压软件包 安装依赖包:pcre-dev ...