vue图片压缩(不失真)

概述1.在index.html中引入mobileBUGFix.min.js // mobileBUGFix.min.js内容见最下面附件 2.在build/webpack.base.conf.js文件中增加： module.exports = { externals: { 'MegaPixImage': 'MegaPixImage', 'JPEGEncoder': 'JPEGEnc

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转换为blobexport 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,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,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压缩质量修复 */function JPEGEncoder(a){function I(a){var c,i,j,k,l,m,n,o,p,b=[16,11,10,16,24,40,51,61,12,14,19,26,58,60,55,13,57,69,56,17,22,29,87,80,62,18,37,68,109,103,77,35,64,81,104,113,92,49,78,121,120,101,72,95,98,112,100,99];for(c=0;64>c;c++)i=d((b[c]*a+50)/100),1>i?i=1:i>255&&(i=255),e[z[c]]=i;for(j=[17,47,99,21,66,99],k=0;64>k;k++)l=d((j[k]*a+50)/100),1>l?l=1:l>255&&(l=255),f[z[k]]=l;for(m=[1,1.387039845,1.306562965,1.175875602,1,.785694958,.5411961,.275899379],n=0,o=0;8>o;o++)for(p=0;8>p;p++)g[n]=1/(8*e[z[n]]*m[o]*m[p]),h[n]=1/(8*f[z[n]]*m[o]*m[p]),n++}function J(a,b){var f,g,c=0,d=0,e=new Array;for(f=1;16>=f;f++){for(g=1;g<=a[f];g++)e[b[d]]=[],e[b[d]][0]=c,e[b[d]][1]=f,d++,c++;c*=2}return e}function K(){i=J(A,B),j=J(E,F),k=J(C,D),l=J(G,H)}function L(){var c,d,e,a=1,b=2;for(c=1;15>=c;c++){for(d=a;b>d;d++)n[32767+d]=c,m[32767+d]=[],m[32767+d][1]=c,m[32767+d][0]=d;for(e=-(b-1);-a>=e;e++)n[32767+e]=c,m[32767+e]=[],m[32767+e][1]=c,m[32767+e][0]=b-1+e;a<<=1,b<<=1}}function M(){for(var a=0;256>a;a++)x[a]=19595*a,x[a+256>>0]=38470*a,x[a+512>>0]=7471*a+32768,x[a+768>>0]=-11059*a,x[a+1024>>0]=-21709*a,x[a+1280>>0]=32768*a+8421375,x[a+1536>>0]=-27439*a,x[a+1792>>0]=-5329*a}function N(a){for(var b=a[0],c=a[1]-1;c>=0;)b&1<<c&&(r|=1<<s),c--,s--,0>s&&(255==r?(O(255),O(0)):O(r),s=7,r=0)}function O(a){q.push(w[a])}function P(a){O(255&a>>8),O(255&a)}function Q(a,b){var c,f,h,q,r,s,t,u,v,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,$,_,k=0;const m=8,n=64;for(l=0;m>l;++l)c=a[k],d=a[k+1],e=a[k+2],f=a[k+3],g=a[k+4],h=a[k+5],i=a[k+6],j=a[k+7],p=c+j,q=c-j,r=d+i,s=d-i,t=e+h,u=e-h,v=f+g,w=f-g,x=p+v,y=p-v,z=r+t,A=r-t,a[k]=x+z,a[k+4]=x-z,B=.707106781*(A+y),a[k+2]=y+B,a[k+6]=y-B,x=w+u,z=u+s,A=s+q,C=.382683433*(x-A),D=.5411961*x+C,E=1.306562965*A+C,F=.707106781*z,G=q+F,H=q-F,a[k+5]=H+D,a[k+3]=H-D,a[k+1]=G+E,a[k+7]=G-E,k+=8;for(k=0,l=0;m>l;++l)c=a[k],d=a[k+8],e=a[k+16],f=a[k+24],g=a[k+32],h=a[k+40],i=a[k+48],j=a[k+56],I=c+j,J=c-j,K=d+i,L=d-i,M=e+h,N=e-h,O=f+g,P=f-g,Q=I+O,R=I-O,S=K+M,T=K-M,a[k]=Q+S,a[k+32]=Q-S,U=.707106781*(T+R),a[k+16]=R+U,a[k+48]=R-U,Q=P+N,S=N+L,T=L+J,V=.382683433*(Q-T),W=.5411961*Q+V,X=1.306562965*T+V,Y=.707106781*S,Z=J+Y,$=J-Y,a[k+40]=$+W,a[k+24]=$-W,a[k+8]=Z+X,a[k+56]=Z-X,k++;for(l=0;n>l;++l)_=a[l]*b[l],o[l]=_>0?0|_+.5:0|_-.5;return o}function R(){P(65504),P(16),O(74),O(70),O(73),O(0),O(1),P(1),O(0)}function S(a,b){P(65472),P(17),O(8),P(b),P(a),O(3),O(17),O(2),O(1)}function T(){var a,b;for(P(65499),P(132),a=0;64>a;a++)O(e[a]);for(O(1),b=0;64>b;b++)O(f[b])}function U(){var a,b,c,h;for(P(65476),P(418),a=0;16>a;a++)O(A[a+1]);for(b=0;11>=b;b++)O(B[b]);for(O(16),c=0;16>c;c++)O(C[c+1]);for(d=0;161>=d;d++)O(D[d]);for(O(1),e=0;16>e;e++)O(E[e+1]);for(f=0;11>=f;f++)O(F[f]);for(O(17),g=0;16>g;g++)O(G[g+1]);for(h=0;161>=h;h++)O(H[h])}function V(){P(65498),P(12),O(63),O(0)}function W(a,e){var h,f=e[0],g=e[240];const i=16,j=63,k=64;for(l=Q(a,b),o=0;k>o;++o)p[z[o]]=l[o];for(q=p[0]-c,c=p[0],0==q?N(d[0]):(h=32767+q,N(d[n[h]]),N(m[h])),r=63;r>0&&0==p[r];r--);if(0==r)return N(f),c;for(s=1;r>=s;){for(u=s;0==p[s]&&r>=s;++s);if(v=s-u,v>=i){for(t=v>>4,w=1;t>=w;++w)N(g);v=15&v}h=32767+p[s],N(e[(v<<4)+n[h]]),N(m[h]),s++}return r!=j&&N(f),c}function X(){var b,a=String.fromCharCode;for(b=0;256>b;b++)w[b]=a(b)}function Y(a){if(0>=a&&(a=1),a>100&&(a=100),y!=a){var b=0;b=50>a?Math.floor(5e3/a):Math.floor(200-2*a),I(b),y=a,console.log("Quality set to: "+a+"%")}}function Z(){var c,b=(new Date).getTime();a||(a=50),X(),K(),L(),M(),Y(a),c=(new Date).getTime()-b,console.log("Initialization "+c+"ms")}var d,H;Math.round,d=Math.floor,e=new Array(64),f=new Array(64),g=new Array(64),h=new Array(64),m=new Array(65535),n=new Array(65535),o=new Array(64),p=new Array(64),q=[],r=0,t=new Array(64),u=new Array(64),v=new Array(64),w=new Array(256),x=new Array(2048),z=[0,5,6,15,27,28,2,4,7,42,3,8,25,30,41,43,9,31,44,53,23,32,39,45,52,54,20,33,38,46,34,50,59,36,48,63],A=[0,0],B=[0,11],C=[0,125],D=[1,65,97,129,145,161,177,193,82,209,240,114,130,67,70,71,73,74,83,84,85,86,88,89,90,102,105,106,115,116,117,118,119,122,131,132,133,134,135,136,137,138,146,147,148,149,150,151,152,153,154,162,163,164,165,166,167,168,169,170,178,179,180,181,182,183,184,185,186,194,195,196,197,198,199,200,201,202,210,211,212,213,214,215,216,217,218,225,226,227,228,229,230,231,232,233,234,241,242,243,244,245,246,247,248,249,250],E=[0,F=[0,G=[0,119],H=[0,this.encode=function(a,b){var d,c=(new Date).getTime();for(b&&Y(b),q=new Array,P(65496),R(),T(),S(a.wIDth,a.height),U(),V(),e=0,f=0,this.encode.displayname="_encode_",m=a.data,n=a.wIDth,o=a.height,p=4*n,z=0;o>z;){for(y=0;p>y;){for(D=P*z+y,E=D,F=-1,G=0,H=0;64>H;H++)G=H>>3,F=4*(7&H),E=D+G*p+F,z+G>=o&&(E-=P*(z+1+G-o)),y+F>=p&&(E-=y+F-p+4),A=m[E++],B=m[E++],C=m[E++],t[H]=(x[A]+x[B+256>>0]+x[C+512>>0]>>16)-128,u[H]=(x[A+768>>0]+x[B+1024>>0]+x[C+1280>>0]>>16)-128,v[H]=(x[A+1280>>0]+x[B+1536>>0]+x[C+1792>>0]>>16)-128;d=W(t,k),e=W(u,l),f=W(v,y+=32}z+=8}return s>=0&&(I=[],I[1]=s+1,I[0]=(1<<s+1)-1,N(I)),P(65497),J="data:image/jpeg;base64,"+btoa(q.join("")),K=(new Date).getTime()-c,console.log("EnCoding time: "+K+"ms"),J},Z()}function getimageDataFromImage(a){var d,b="string"==typeof a?document.getElementByID(a):a,c=document.createElement("canvas");return c.wIDth=b.wIDth,c.height=b.height,d=c.getContext("2d"),d.drawImage(b,0),d.getimageData(0,c.wIDth,c.height)}/* megAPIx-image.Js for IOS(iphone5+) drawImage画面扭曲修复  */!function(){function a(a){var d,b=a.naturalWIDth,c=a.naturalHeight;return b*c>1048576?(d=document.createElement("canvas"),d.wIDth=d.height=1,e=d.getContext("2d"),e.drawImage(a,-b+1,0===e.getimageData(0,1).data[3]):!1}function b(a,c){var e,d=document.createElement("canvas");for(d.wIDth=1,d.height=c,f=e.getimageData(0,c).data,g=0,h=c,i=c;i>g;)j=f[4*(i-1)+3],0===j?h=i:g=i,i=h+g>>1;return k=i/c,0===k?1:k}function c(a,c){var e=document.createElement("canvas");return d(a,c),e.toDataURL("image/jpeg",b.quality||.8)}function d(c,g){var m,h=c.naturalWIDth,i=c.naturalHeight,j=f.wIDth,k=f.height,l=d.getContext("2d");for(l.save(),e(d,f.orIEntation),m=a(c),m&&(h/=2,i/=2),n=1024,o=document.createElement("canvas"),o.wIDth=o.height=n,p=o.getContext("2d"),q=g?b(c,i):1,r=Math.ceil(n*j/h),s=Math.ceil(n*k/i/q),t=0,u=0;i>t;){for(v=0,w=0;h>v;)p.clearRect(0,n),p.drawImage(c,-v,-t),l.drawImage(o,s),v+=n,w+=r;t+=n,u+=s}l.restore(),o=p=null}function e(a,e){switch(e){case 5:case 6:case 7:case 8:a.wIDth=d,a.height=c;break;default:a.wIDth=c,a.height=d}switch(e){case 2:b.translate(c,b.scale(-1,1);break;case 3:b.translate(c,d),b.rotate(Math.PI);break;case 4:b.translate(0,b.scale(1,-1);break;case 5:b.rotate(.5*Math.PI),-1);break;case 6:b.rotate(.5*Math.PI),b.translate(0,-d);break;case 7:b.rotate(.5*Math.PI),b.translate(c,-d),1);break;case 8:b.rotate(-.5*Math.PI),b.translate(-c,0)}}function f(a){var b,d;if(window.Blob&&a instanceof Blob){if(b=new Image,c=window.URL&&window.URL.createObjectURL?window.URL:window.webkitURL&&window.webkitURL.createObjectURL?window.webkitURL:null,!c)throw Error("No createObjectURL function found to create blob url");b.src=c.createObjectURL(a),this.blob=a,a=b}a.naturalWIDth||a.naturalHeight||(d=this,a.onload=function(){var b,a=d.imageLoadListeners;if(a)for(d.imageLoadListeners=null,b=0,c=a.length;c>b;b++)a[b]()},this.imageLoadListeners=[]),this.srcImage=a}f.prototype.render=function(a,e){var f,p;if(this.imageLoadListeners)return f=this,this.imageLoadListeners.push(function(){f.render(a,e)}),voID 0;b=b||{},g=this.srcImage.naturalWIDth,h=this.srcImage.naturalHeight,i=b.wIDth,j=b.height,k=b.maxWIDth,l=b.maxHeight,m=!this.blob||"image/jpeg"===this.blob.type,i&&!j?j=h*i/g<<0:j&&!i?i=g*j/h<<0:(i=g,j=h),k&&i>k&&(i=k,j=h*i/g<<0),l&&j>l&&(j=l,i=g*j/h<<0),n={wIDth:i,height:j};for(o in b)n[o]=b[o];p=a.tagname.tolowerCase(),"img"===p?a.src=c(this.srcImage,m):"canvas"===p&&d(this.srcImage,a,m),"function"==typeof this.onrender&&this.onrender(a),e&&e()},"function"==typeof define&&define.amd?define([],function(){return f}):this.MegAPIxImage=f}();

总结

以上是内存溢出为你收集整理的vue图片压缩(不失真)全部内容，希望文章能够帮你解决vue图片压缩(不失真)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。