vue图片压缩不失真_vue图片压缩(不失真)

1.在index.html中引入mobileBUGFix.min.js

// mobileBUGFix.min.js内容见最下面附件

2.在build/webpack.base.conf.js文件中增加：

module.exports = {

externals: {

'MegaPixImage': 'MegaPixImage',

'JPEGEncoder': 'JPEGEncoder'

}

3.新建compressImage.js，内容如下：

import MegaPixImage from 'MegaPixImage'

import JPEGEncoder from 'JPEGEncoder'

// 将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) => {

// 生成canvas

var canvas = document.createElement('canvas')

var ctx = canvas.getContext('2d')

var img = new Image()

img.crossOrigin = 'Anonymous'

img.onload = function() {

var that = this

var w = that.width

var h = that.height

var scale = w / h

w = config.width || config.height * scale || w

h = config.height || config.width / scale || h

// 最大宽高如有限制时的处理

w = config.maxWidth && w > config.maxWidth ? config.maxWidth : w

h = config.maxHeight && h > config.maxHeight ? config.maxHeight : h

w = Math.min(w, h * scale) || w

h = Math.min(h, w / scale) || h

var quality = 0.7 // 默认图片质量为0.7

// 创建属性节点

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/jpeg', quality)

// 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

// 修复IOS

if (navigator.userAgent.match(/iphone/i)) {

var mpImg = new MegaPixImage(img)

mpImg.render(canvas, {

maxWidth: w,

maxHeight: h,

quality: quality

})

base64 = canvas.toDataURL('image/jpeg', quality)

}

// 修复android

if (navigator.userAgent.match(/Android/i)) {

var encoder = new JPEGEncoder()

base64 = encoder.encode(ctx.getImageData(0, 0, w, h), quality * 100)

}

// var blob = convertBase64UrlToBlob(base64)

// 回调函数返回base64的值，也可根据自己的需求返回blob的值

// base64 = base64.substr(base64.indexOf(',') + 1)

// 去掉base64前面的部分

resolve(base64)

canvas = null

}

img.src = path

})

}

4.使用

// 引入

import { compressImage } from './compressImage' // 具体路径按自己存放的位置而定

// 调用

compressImage(图片路径, {

maxWidth: 1920, // 限制最大宽度

maxHeight: 1080, // 限制最大高度，若宽高都限制了，按原图比例最小边为主

width: 100, // 压缩后图片的宽

height: 200, // 压缩后图片的高，宽高若只传一个，则按图片原比例进行压缩

quality: 0.8 // 压缩后图片的清晰度，取值0-1，值越小，所绘制出的图像越模糊

}).then(result => {

console.log(result) // result即为压缩后的结果

})

附件：

mobileBUGFix.min.js

/* jpeg_encoder_basic.js for android jpeg压缩质量修复 */

/* megapix-image.js for IOS(iphone5+) drawImage画面扭曲修复 */

vue图片压缩不失真_vue图片压缩(不失真)相关推荐

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
vue 实现无限轮播_vue图片无限轮播
近期项目中出现了很多图片轮播的需求,趁此机会写了一个关于图片自动轮播,手动切换的小Demo,具体效果看下图: 屏幕快照 2018-10-25 上午9.47.30.png 具体实现代码如下: v-sho ...
vue点击按钮上传图片_vue图片上传
前端代码: style="height: 200px;" class="upload-demo" ref="uploadVideoCoverDemo& ...
返回图片_Vue 图片压缩并上传至服务器
日常开发中经常会遇到上传图片的需求,随着手机的蓬勃发展,现在拍出来的照片分辨率越来越高,随之带来的问题就是图片占用空间越来越大,如果我们直接上传图片可能就会浪费很大一笔资源,本文主要讲解基于 Vue ...
Matlab导出高清图片、且Word中压缩不失真、转换PDF不失真
1.MATLAB中最常用的图片导出方式:文件-导出设置-渲染-600dpi-导出-确定. 2.MATLAB中第二种图片导出方式:编辑-复制图窗-粘贴到Word.(推荐使用,该图片为矢量图格式) Wor ...
基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
如何压缩照片不失真？图片压缩不模糊的方法
经常拍照的小伙伴们应该都知道,现在的数码设备的像素越来越高,所以拍摄出来的照片也就越来越大,一般照片都在几M到十几M之间,这些图片虽然非常清楚,但是同样的也非常占空间,平时在使用或者发送.上传的时候非 ...
node 压缩图片_手搓一个TinyPng压缩图片的WebpackPlugin
作者: JowayYoung 转发链接:https://mp.weixin.qq.com/s/eqsZwZPCX-GZyB-EOm3TwQ 前言曾经发表过一篇性能优化的文章<「实践」细聊前端性 ...
使用compressorjs压缩图片，优化功能，压缩所有格式的图片
上一篇文章写的图片压缩功能只适用于image/jpeg和image/webp图像.vue实现图片压缩,支持多文件上传时压缩图片(只能支持jpeg)_ZMJ_QQ的博客-CSDN博客在实际开发中常见的 ...

vue图片压缩不失真_vue图片压缩(不失真)

vue图片压缩不失真_vue图片压缩(不失真)相关推荐

最新文章

热门文章