devbox
煮酒与君饮
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序webview嵌入H5项目完美实现图片上传至阿里云OSS，上传前实现图片压缩，角度校正。_小程序在webview上传文件到oss

作者：煮酒与君饮 | 2024-06-21 04:16:21

赞

踩

小程序在webview上传文件到oss

小程序webview嵌入H5项目完美实现图片上传至阿里云OSS，上传前实现图片压缩，角度校正。

VUE项目用的插件是vant，开始是想用vant的上传图片插件，可是他在选择图片的时候非常慢，用的是<input type="file">打开相册不像在微信公众里面选择图片那种样式。

后面是用微信SDK选择图片的方法chooseImage，但是微信小程序webview嵌入H5里面的SDK只支持选择图片不支持wx.uploadFile

所以只能自己用axios,但是axios是已经封装统一请求接口了，里面有很多头参数以及默认自带的['Content-Type'] = 'application/x-www-form-urlencoded'，所以总是上传不了。

后面干脆使用JQUERY 来来上传就成功了。值得注意的是压缩图片的JS代码较多，花了不少时间。

实现思路：

api 是请求接口的请注意，即封装的 axios

IOS角度旋转问题用到的 exif.js

  1. /**
  2.  * Minified by jsDelivr using UglifyJS v3.3.25.
  3.  * Original file: /npm/exif-js@2.3.0/exif.js
  4.  * 
  5.  * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
  6.  */
  7. (function(){var d=!1,l=function(e){return e instanceof l?e:this instanceof l?void(this.EXIFwrapped=e):new l(e)};"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=l),exports.EXIF=l):this.EXIF=l;var u=l.Tags={36864:"ExifVersion",40960:"FlashpixVersion",40961:"ColorSpace",40962:"PixelXDimension",40963:"PixelYDimension",37121:"ComponentsConfiguration",37122:"CompressedBitsPerPixel",37500:"MakerNote",37510:"UserComment",40964:"RelatedSoundFile",36867:"DateTimeOriginal",36868:"DateTimeDigitized",37520:"SubsecTime",37521:"SubsecTimeOriginal",37522:"SubsecTimeDigitized",33434:"ExposureTime",33437:"FNumber",34850:"ExposureProgram",34852:"SpectralSensitivity",34855:"ISOSpeedRatings",34856:"OECF",37377:"ShutterSpeedValue",37378:"ApertureValue",37379:"BrightnessValue",37380:"ExposureBias",37381:"MaxApertureValue",37382:"SubjectDistance",37383:"MeteringMode",37384:"LightSource",37385:"Flash",37396:"SubjectArea",37386:"FocalLength",41483:"FlashEnergy",41484:"SpatialFrequencyResponse",41486:"FocalPlaneXResolution",41487:"FocalPlaneYResolution",41488:"FocalPlaneResolutionUnit",41492:"SubjectLocation",41493:"ExposureIndex",41495:"SensingMethod",41728:"FileSource",41729:"SceneType",41730:"CFAPattern",41985:"CustomRendered",41986:"ExposureMode",41987:"WhiteBalance",41988:"DigitalZoomRation",41989:"FocalLengthIn35mmFilm",41990:"SceneCaptureType",41991:"GainControl",41992:"Contrast",41993:"Saturation",41994:"Sharpness",41995:"DeviceSettingDescription",41996:"SubjectDistanceRange",40965:"InteroperabilityIFDPointer",42016:"ImageUniqueID"},c=l.TiffTags={256:"ImageWidth",257:"ImageHeight",34665:"ExifIFDPointer",34853:"GPSInfoIFDPointer",40965:"InteroperabilityIFDPointer",258:"BitsPerSample",259:"Compression",262:"PhotometricInterpretation",274:"Orientation",277:"SamplesPerPixel",284:"PlanarConfiguration",530:"YCbCrSubSampling",531:"YCbCrPositioning",282:"XResolution",283:"YResolution",296:"ResolutionUnit",273:"StripOffsets",278:"RowsPerStrip",279:"StripByteCounts",513:"JPEGInterchangeFormat",514:"JPEGInterchangeFormatLength",301:"TransferFunction",318:"WhitePoint",319:"PrimaryChromaticities",529:"YCbCrCoefficients",532:"ReferenceBlackWhite",306:"DateTime",270:"ImageDescription",271:"Make",272:"Model",305:"Software",315:"Artist",33432:"Copyright"},f=l.GPSTags={0:"GPSVersionID",1:"GPSLatitudeRef",2:"GPSLatitude",3:"GPSLongitudeRef",4:"GPSLongitude",5:"GPSAltitudeRef",6:"GPSAltitude",7:"GPSTimeStamp",8:"GPSSatellites",9:"GPSStatus",10:"GPSMeasureMode",11:"GPSDOP",12:"GPSSpeedRef",13:"GPSSpeed",14:"GPSTrackRef",15:"GPSTrack",16:"GPSImgDirectionRef",17:"GPSImgDirection",18:"GPSMapDatum",19:"GPSDestLatitudeRef",20:"GPSDestLatitude",21:"GPSDestLongitudeRef",22:"GPSDestLongitude",23:"GPSDestBearingRef",24:"GPSDestBearing",25:"GPSDestDistanceRef",26:"GPSDestDistance",27:"GPSProcessingMethod",28:"GPSAreaInformation",29:"GPSDateStamp",30:"GPSDifferential"},g=l.IFD1Tags={256:"ImageWidth",257:"ImageHeight",258:"BitsPerSample",259:"Compression",262:"PhotometricInterpretation",273:"StripOffsets",274:"Orientation",277:"SamplesPerPixel",278:"RowsPerStrip",279:"StripByteCounts",282:"XResolution",283:"YResolution",284:"PlanarConfiguration",296:"ResolutionUnit",513:"JpegIFOffset",514:"JpegIFByteCount",529:"YCbCrCoefficients",530:"YCbCrSubSampling",531:"YCbCrPositioning",532:"ReferenceBlackWhite"},m=l.StringValues={ExposureProgram:{0:"Not defined",1:"Manual",2:"Normal program",3:"Aperture priority",4:"Shutter priority",5:"Creative program",6:"Action program",7:"Portrait mode",8:"Landscape mode"},MeteringMode:{0:"Unknown",1:"Average",2:"CenterWeightedAverage",3:"Spot",4:"MultiSpot",5:"Pattern",6:"Partial",255:"Other"},LightSource:{0:"Unknown",1:"Daylight",2:"Fluorescent",3:"Tungsten (incandescent light)",4:"Flash",9:"Fine weather",10:"Cloudy weather",11:"Shade",12:"Daylight fluorescent (D 5700 - 7100K)",13:"Day white fluorescent (N 4600 - 5400K)",14:"Cool white fluorescent (W 3900 - 4500K)",15:"White fluorescent (WW 3200 - 3700K)",17:"Standard light A",18:"Standard light B",19:"Standard light C",20:"D55",21:"D65",22:"D75",23:"D50",24:"ISO studio tungsten",255:"Other"},Flash:{0:"Flash did not fire",1:"Flash fired",5:"Strobe return light not detected",7:"Strobe return light detected",9:"Flash fired, compulsory flash mode",13:"Flash fired, compulsory flash mode, return light not detected",15:"Flash fired, compulsory flash mode, return light detected",16:"Flash did not fire, compulsory flash mode",24:"Flash did not fire, auto mode",25:"Flash fired, auto mode",29:"Flash fired, auto mode, return light not detected",31:"Flash fired, auto mode, return light detected",32:"No flash function",65:"Flash fired, red-eye reduction mode",69:"Flash fired, red-eye reduction mode, return light not detected",71:"Flash fired, red-eye reduction mode, return light detected",73:"Flash fired, compulsory flash mode, red-eye reduction mode",77:"Flash fired, compulsory flash mode, red-eye reduction mode, return light not detected",79:"Flash fired, compulsory flash mode, red-eye reduction mode, return light detected",89:"Flash fired, auto mode, red-eye reduction mode",93:"Flash fired, auto mode, return light not detected, red-eye reduction mode",95:"Flash fired, auto mode, return light detected, red-eye reduction mode"},SensingMethod:{1:"Not defined",2:"One-chip color area sensor",3:"Two-chip color area sensor",4:"Three-chip color area sensor",5:"Color sequential area sensor",7:"Trilinear sensor",8:"Color sequential linear sensor"},SceneCaptureType:{0:"Standard",1:"Landscape",2:"Portrait",3:"Night scene"},SceneType:{1:"Directly photographed"},CustomRendered:{0:"Normal process",1:"Custom process"},WhiteBalance:{0:"Auto white balance",1:"Manual white balance"},GainControl:{0:"None",1:"Low gain up",2:"High gain up",3:"Low gain down",4:"High gain down"},Contrast:{0:"Normal",1:"Soft",2:"Hard"},Saturation:{0:"Normal",1:"Low saturation",2:"High saturation"},Sharpness:{0:"Normal",1:"Soft",2:"Hard"},SubjectDistanceRange:{0:"Unknown",1:"Macro",2:"Close view",3:"Distant view"},FileSource:{3:"DSC"},Components:{0:"",1:"Y",2:"Cb",3:"Cr",4:"R",5:"G",6:"B"}};function i(e){return!!e.exifdata}function r(i,o){function t(e){var t=p(e);i.exifdata=t||{};var n=function(e){var t=new DataView(e);d&&console.log("Got file of length "+e.byteLength);if(255!=t.getUint8(0)||216!=t.getUint8(1))return d&&console.log("Not a valid JPEG"),!1;var n=2,r=e.byteLength;for(;n<r;){if(l=n,56===(s=t).getUint8(l)&&66===s.getUint8(l+1)&&73===s.getUint8(l+2)&&77===s.getUint8(l+3)&&4===s.getUint8(l+4)&&4===s.getUint8(l+5)){var i=t.getUint8(n+7);i%2!=0&&(i+=1),0===i&&(i=4);var o=n+8+i,a=t.getUint16(n+6+i);return S(e,o,a)}n++}var s,l}(e);if(i.iptcdata=n||{},l.isXmpEnabled){var r=function(e){if(!("DOMParser"in self))return;var t=new DataView(e);d&&console.log("Got file of length "+e.byteLength);if(255!=t.getUint8(0)||216!=t.getUint8(1))return d&&console.log("Not a valid JPEG"),!1;var n=2,r=e.byteLength,i=new DOMParser;for(;n<r-4;){if("http"==y(t,n,4)){var o=n-1,a=t.getUint16(n-2)-1,s=y(t,o,a),l=s.indexOf("xmpmeta>")+8,u=(s=s.substring(s.indexOf("<x:xmpmeta"),l)).indexOf("x:xmpmeta")+10;s=s.slice(0,u)+'xmlns:Iptc4xmpCore="http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:tiff="http://ns.adobe.com/tiff/1.0/" xmlns:plus="http://schemas.android.com/apk/lib/com.google.android.gms.plus" xmlns:ext="http://www.gettyimages.com/xsltExtension/1.0" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:crs="http://ns.adobe.com/camera-raw-settings/1.0/" xmlns:xapGImg="http://ns.adobe.com/xap/1.0/g/img/" xmlns:Iptc4xmpExt="http://iptc.org/std/Iptc4xmpExt/2008-02-29/" '+s.slice(u);var c=i.parseFromString(s,"text/xml");return x(c)}n++}}(e);i.xmpdata=r||{}}o&&o.call(i)}var e,n,r;if(i.src)if(/^data\:/i.test(i.src))t(function(e,t){t=t||e.match(/^data\:([^\;]+)\;base64,/im)[1]||"",e=e.replace(/^data\:([^\;]+)\;base64,/gim,"");for(var n=atob(e),r=n.length,i=new ArrayBuffer(r),o=new Uint8Array(i),a=0;a<r;a++)o[a]=n.charCodeAt(a);return i}(i.src));else if(/^blob\:/i.test(i.src)){(s=new FileReader).onload=function(e){t(e.target.result)},e=i.src,n=function(e){s.readAsArrayBuffer(e)},(r=new XMLHttpRequest).open("GET",e,!0),r.responseType="blob",r.onload=function(e){200!=this.status&&0!==this.status||n(this.response)},r.send()}else{var a=new XMLHttpRequest;a.onload=function(){if(200!=this.status&&0!==this.status)throw"Could not load image";t(a.response),a=null},a.open("GET",i.src,!0),a.responseType="arraybuffer",a.send(null)}else if(self.FileReader&&(i instanceof self.Blob||i instanceof self.File)){var s;(s=new FileReader).onload=function(e){d&&console.log("Got file of length "+e.target.result.byteLength),t(e.target.result)},s.readAsArrayBuffer(i)}}function p(e){var t=new DataView(e);if(d&&console.log("Got file of length "+e.byteLength),255!=t.getUint8(0)||216!=t.getUint8(1))return d&&console.log("Not a valid JPEG"),!1;for(var n,r=2,i=e.byteLength;r<i;){if(255!=t.getUint8(r))return d&&console.log("Not a valid marker at offset "+r+", found: "+t.getUint8(r)),!1;if(n=t.getUint8(r+1),d&&console.log(n),225==n)return d&&console.log("Found 0xFFE1 marker"),o(t,r+4,t.getUint16(r+2));r+=2+t.getUint16(r+2)}}var h={120:"caption",110:"credit",25:"keywords",55:"dateCreated",80:"byline",85:"bylineTitle",122:"captionWriter",105:"headline",116:"copyright",15:"category"};function S(e,t,n){for(var r,i,o,a,s=new DataView(e),l={},u=t;u<t+n;)28===s.getUint8(u)&&2===s.getUint8(u+1)&&(a=s.getUint8(u+2))in h&&((o=s.getInt16(u+3))+5,i=h[a],r=y(s,u+5,o),l.hasOwnProperty(i)?l[i]instanceof Array?l[i].push(r):l[i]=[l[i],r]:l[i]=r),u++;return l}function P(e,t,n,r,i){var o,a,s,l=e.getUint16(n,!i),u={};for(s=0;s<l;s++)o=n+12*s+2,!(a=r[e.getUint16(o,!i)])&&d&&console.log("Unknown tag: "+e.getUint16(o,!i)),u[a]=F(e,o,t,n,i);return u}function F(e,t,n,r,i){var o,a,s,l,u,c,d=e.getUint16(t+2,!i),f=e.getUint32(t+4,!i),g=e.getUint32(t+8,!i)+n;switch(d){case 1:case 7:if(1==f)return e.getUint8(t+8,!i);for(o=4<f?g:t+8,a=[],l=0;l<f;l++)a[l]=e.getUint8(o+l);return a;case 2:return y(e,o=4<f?g:t+8,f-1);case 3:if(1==f)return e.getUint16(t+8,!i);for(o=2<f?g:t+8,a=[],l=0;l<f;l++)a[l]=e.getUint16(o+2*l,!i);return a;case 4:if(1==f)return e.getUint32(t+8,!i);for(a=[],l=0;l<f;l++)a[l]=e.getUint32(g+4*l,!i);return a;case 5:if(1==f)return u=e.getUint32(g,!i),c=e.getUint32(g+4,!i),(s=new Number(u/c)).numerator=u,s.denominator=c,s;for(a=[],l=0;l<f;l++)u=e.getUint32(g+8*l,!i),c=e.getUint32(g+4+8*l,!i),a[l]=new Number(u/c),a[l].numerator=u,a[l].denominator=c;return a;case 9:if(1==f)return e.getInt32(t+8,!i);for(a=[],l=0;l<f;l++)a[l]=e.getInt32(g+4*l,!i);return a;case 10:if(1==f)return e.getInt32(g,!i)/e.getInt32(g+4,!i);for(a=[],l=0;l<f;l++)a[l]=e.getInt32(g+8*l,!i)/e.getInt32(g+4+8*l,!i);return a}}function y(e,t,r){var i="";for(n=t;n<t+r;n++)i+=String.fromCharCode(e.getUint8(n));return i}function o(e,t){if("Exif"!=y(e,t,4))return d&&console.log("Not valid EXIF data! "+y(e,t,4)),!1;var n,r,i,o,a,s=t+6;if(18761==e.getUint16(s))n=!1;else{if(19789!=e.getUint16(s))return d&&console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)"),!1;n=!0}if(42!=e.getUint16(s+2,!n))return d&&console.log("Not valid TIFF data! (no 0x002A)"),!1;var l=e.getUint32(s+4,!n);if(l<8)return d&&console.log("Not valid TIFF data! (First offset less than 8)",e.getUint32(s+4,!n)),!1;if((r=P(e,s,s+l,c,n)).ExifIFDPointer)for(i in o=P(e,s,s+r.ExifIFDPointer,u,n)){switch(i){case"LightSource":case"Flash":case"MeteringMode":case"ExposureProgram":case"SensingMethod":case"SceneCaptureType":case"SceneType":case"CustomRendered":case"WhiteBalance":case"GainControl":case"Contrast":case"Saturation":case"Sharpness":case"SubjectDistanceRange":case"FileSource":o[i]=m[i][o[i]];break;case"ExifVersion":case"FlashpixVersion":o[i]=String.fromCharCode(o[i][0],o[i][1],o[i][2],o[i][3]);break;case"ComponentsConfiguration":o[i]=m.Components[o[i][0]]+m.Components[o[i][1]]+m.Components[o[i][2]]+m.Components[o[i][3]]}r[i]=o[i]}if(r.GPSInfoIFDPointer)for(i in a=P(e,s,s+r.GPSInfoIFDPointer,f,n)){switch(i){case"GPSVersionID":a[i]=a[i][0]+"."+a[i][1]+"."+a[i][2]+"."+a[i][3]}r[i]=a[i]}return r.thumbnail=function(e,t,n,r){var i,o,a,s,l=(o=t+n,a=r,s=(i=e).getUint16(o,!a),i.getUint32(o+2+12*s,!a));if(!l)return{};if(l>e.byteLength)return{};var u=P(e,t,t+l,g,r);if(u.Compression)switch(u.Compression){case 6:if(u.JpegIFOffset&&u.JpegIFByteCount){var c=t+u.JpegIFOffset,d=u.JpegIFByteCount;u.blob=new Blob([new Uint8Array(e.buffer,c,d)],{type:"image/jpeg"})}break;case 1:console.log("Thumbnail image format is TIFF, which is not implemented.");break;default:console.log("Unknown thumbnail image format '%s'",u.Compression)}else 2==u.PhotometricInterpretation&&console.log("Thumbnail image format is RGB, which is not implemented.");return u}(e,s,l,n),r}function b(e){var t={};if(1==e.nodeType){if(0<e.attributes.length){t["@attributes"]={};for(var n=0;n<e.attributes.length;n++){var r=e.attributes.item(n);t["@attributes"][r.nodeName]=r.nodeValue}}}else if(3==e.nodeType)return e.nodeValue;if(e.hasChildNodes())for(var i=0;i<e.childNodes.length;i++){var o=e.childNodes.item(i),a=o.nodeName;if(null==t[a])t[a]=b(o);else{if(null==t[a].push){var s=t[a];t[a]=[],t[a].push(s)}t[a].push(b(o))}}return t}function x(e){try{var t={};if(0<e.children.length)for(var n=0;n<e.children.length;n++){var r=e.children.item(n),i=r.attributes;for(var o in i){var a=i[o],s=a.nodeName,l=a.nodeValue;void 0!==s&&(t[s]=l)}var u=r.nodeName;if(void 0===t[u])t[u]=b(r);else{if(void 0===t[u].push){var c=t[u];t[u]=[],t[u].push(c)}t[u].push(b(r))}}else t=e.textContent;return t}catch(e){console.log(e.message)}}l.enableXmp=function(){l.isXmpEnabled=!0},l.disableXmp=function(){l.isXmpEnabled=!1},l.getData=function(e,t){return!((self.Image&&e instanceof self.Image||self.HTMLImageElement&&e instanceof self.HTMLImageElement)&&!e.complete)&&(i(e)?t&&t.call(e):r(e,t),!0)},l.getTag=function(e,t){if(i(e))return e.exifdata[t]},l.getIptcTag=function(e,t){if(i(e))return e.iptcdata[t]},l.getAllTags=function(e){if(!i(e))return{};var t,n=e.exifdata,r={};for(t in n)n.hasOwnProperty(t)&&(r[t]=n[t]);return r},l.getAllIptcTags=function(e){if(!i(e))return{};var t,n=e.iptcdata,r={};for(t in n)n.hasOwnProperty(t)&&(r[t]=n[t]);return r},l.pretty=function(e){if(!i(e))return"";var t,n=e.exifdata,r="";for(t in n)n.hasOwnProperty(t)&&("object"==typeof n[t]?n[t]instanceof Number?r+=t+" : "+n[t]+" ["+n[t].numerator+"/"+n[t].denominator+"]\r\n":r+=t+" : ["+n[t].length+" values]\r\n":r+=t+" : "+n[t]+"\r\n");return r},l.readFromBinaryFile=function(e){return p(e)},"function"==typeof define&&define.amd&&define("exif-js",[],function(){return l})}).call(this);
  8. //# sourceMappingURL=/sm/4f4f84956292156efc04b79e1131dc7c3a51794b7b3d62b43ed5eaca1b36d71e.map

 

1、首先初始化微信SDK   wxInit.js

  1. /**微信初始化***/
  2. const wxInit = async(callback) = >{
  3.     var url = location.href.split('#')[0];
  4.     const json = await api.getSgture({
  5.         q: {
  6.             url: url
  7.         },
  8.         loading: false
  9.     });
  10.     if (json.returnCode == 0) {
  11.         wx.config({
  12.             debug: false,
  13.             appId: json.result.appid,
  14.             timestamp: json.result.timestamp,
  15.             nonceStr: json.result.noncestr,
  16.             signature: json.result.sgture,
  17.             jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'chooseImage', 'previewImage']
  18.         });
  19.         wx.ready(function() {
  20.             callback();
  21.         });
  22.     }
  23. }
  24.  
  25. export default{ wxInit }

2、图片压缩上传JS ,上传用的JQUERY，我发现用axios 做上传老是报跨域问题，果断放弃，用JQUERY方便

  1. import wx from 'weixin-js-sdk';
  2. import { Toast }
  3. from 'vant';
  4. import api from '@/api/api';
  5. import $ from "jquery";
  6.  
  7. //公从号选择图片转换为base64
  8. function wxGetLocalImgData(localId, callback) {
  9.     wx.getLocalImgData({
  10.         localId: localId,
  11.         // 图片的localID
  12.         success: res = >{
  13.             let name = localId.substr(23, localId.length);
  14.             var localData = res.localData;
  15.             if (localData.indexOf('data:image') != 0) {
  16.                 localData = 'data:image/jpeg;base64,' + localData;
  17.             }
  18.             localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
  19.             let base64 = localData.toString().split(',')[1];
  20.             base64ToBlob({
  21.                 b64data: base64,
  22.                 name: name + '.jpg',
  23.                 contentType: 'image/jpg'
  24.             }).then(blob = >{
  25.                 callback(blob);
  26.             });
  27.         }
  28.     })
  29. }
  30.  
  31. //BlobUrl转blob数据  
  32. function objectURLToBlob(url, callback) {
  33.     var http = new XMLHttpRequest();
  34.     http.open("GET", url, true);
  35.     http.responseType = "blob";
  36.     http.onload = function(e) {
  37.         if (this.status == 200 || this.status === 0) {
  38.             callback(this.response)
  39.         }
  40.     };
  41.     http.send()
  42. }
  43.  
  44. /**H5图片压缩 返回base64 */
  45. function dealImage(path, file, obj, callback) {
  46.     var img = new Image();
  47.     img.src = path;
  48.     img.onload = function() {
  49.         var that = this;
  50.         let imgMaxWidth = 1024; //图片最大宽
  51.         let imgMaxHeight = 1440; //图片最大高
  52.         let imgw = that.width;
  53.         let imgh = that.height;
  54.         let canvasW = imgw;
  55.         let canvasH = imgh;
  56.         if (imgw > imgh && imgw > imgMaxWidth) {
  57.             canvasW = imgMaxWidth;
  58.             canvasH = parseInt(imgMaxWidth * (imgh / imgw));
  59.         } else if (imgw < imgh && imgh > imgMaxHeight) {
  60.             canvasH = imgMaxHeight;
  61.             canvasW = parseInt(imgMaxHeight * (imgw / imgh));
  62.         } else if (imgw == imgh && imgw > imgMaxWidth) {
  63.             canvasW = imgMaxWidth;
  64.             canvasH = imgMaxWidth;
  65.         }
  66.         //生成canvas
  67.         var canvas = document.createElement('canvas');
  68.         var ctx = canvas.getContext('2d');
  69.         canvas.width = canvasW;
  70.         canvas.height = canvasH;
  71.         let EXIF = require('@/util/exif-js.js');
  72.         EXIF.getData(file,
  73.         function() {
  74.             let Orientation = EXIF.getTag(this, 'Orientation');
  75.             if (typeof(Orientation) == 'undefined') {
  76.                 ctx.drawImage(that, 0, 0, canvasW, canvasH);
  77.             } else {
  78.                 let w = canvasW,
  79.                 h = canvasH;
  80.                 switch (Orientation) {
  81.                 case 6:
  82.                     //需要顺时针（向右）90度旋转
  83.                     canvas.height = w;
  84.                     canvas.width = h;
  85.                     ctx.rotate(Math.PI / 180 * 90);
  86.                     ctx.drawImage(that, 0, -h, w, h);
  87.                     break;
  88.  
  89.                 case 8:
  90.                     //需要逆时针（向左）90度旋转	
  91.                     canvas.height = w;
  92.                     canvas.width = h;
  93.                     ctx.rotate(3 * Math.PI / 2);
  94.                     ctx.drawImage(that, -w, 0, w, h);
  95.                     break;
  96.  
  97.                 case 3:
  98.                     //需要180度旋转 转两次
  99.                     ctx.rotate(Math.PI);
  100.                     ctx.drawImage(that, -w, -h, w, h);
  101.                     break;
  102.  
  103.                 default:
  104.                     ctx.drawImage(that, 0, 0, w, h);
  105.                     break;
  106.                 }
  107.             }
  108.             var base64 = canvas.toDataURL('image/jpeg', 1);
  109.             callback(base64);
  110.         })
  111.     }
  112. }
  113.  
  114. /****base64转Blob***/
  115. function base64ToBlob({
  116.     b64data = '',
  117.     name = '',
  118.     contentType = '',
  119.     sliceSize = 512
  120. } = {}) {
  121.     return new Promise((resolve, reject) = >{
  122.         // 使用 atob() 方法将数据解码
  123.         let byteCharacters = atob(b64data);
  124.         let byteArrays = [];
  125.         for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  126.             let slice = byteCharacters.slice(offset, offset + sliceSize);
  127.             let byteNumbers = [];
  128.             for (let i = 0; i < slice.length; i++) {
  129.                 byteNumbers.push(slice.charCodeAt(i));
  130.             }
  131.             // 8 位无符号整数值的类型化数组。内容将初始化为 0。
  132.             // 如果无法分配请求数目的字节，则将引发异常。
  133.             byteArrays.push(new Uint8Array(byteNumbers));
  134.         }
  135.         let result = new Blob(byteArrays, {
  136.             type: contentType
  137.         }) result = Object.assign(result, {
  138.             // 这里一定要处理一下 URL.createObjectURL
  139.             preview: URL.createObjectURL(result),
  140.             name: name
  141.         });
  142.         resolve(result)
  143.     })
  144. }
  145.  
  146. /** base64转file
  147. 		* filename图片的名字，dataurl是base64地址
  148. 		*/
  149. function dataURLtoFile(dataurl, filename) {
  150.     var arr = dataurl.split(','),
  151.     mime = arr[0].match(/:(.*?);/)[1],
  152.     bstr = atob(arr[1]),
  153.     n = bstr.length,
  154.     u8arr = new Uint8Array(n);
  155.     while (n--) {
  156.         u8arr[n] = bstr.charCodeAt(n);
  157.     }
  158.     return new File([u8arr], filename, {
  159.         type: mime
  160.     });
  161. }
  162.  
  163. //h5上传图片处理  res图片资源, callback返回函数
  164. function h5uploadDo(url, callback) {
  165.     var that = this;
  166.     let i = url.lastIndexOf('/');
  167.     let name = url.substr(i + 1, url.length);
  168.     objectURLToBlob(url,
  169.     function(blob) {
  170.         let file = new window.File([blob], name + '.jpg', {
  171.             type: 'jpg'
  172.         });
  173.         let reader = new FileReader();
  174.         reader.readAsDataURL(file);
  175.         reader.onload = function(e) {
  176.             console.log(file, 1111);
  177.             dealImage(this.result, file, {
  178.                 width: 1440
  179.             },
  180.             function(base) {
  181.                 let file2 = dataURLtoFile(base, name);
  182.                 let arr = [];
  183.                 arr.push({
  184.                     name: name + '.jpg',
  185.                     path: file2,
  186.                     size: 500
  187.                 });
  188.                 callback(arr);
  189.             });
  190.         };
  191.     });
  192. }
  193.  
  194. //上传图片
  195. const uploadImg = async(id, arr, type, callback) = >{
  196.     var that = this const json = await api.getOssPolicy({
  197.         m: 'post',
  198.         q: {
  199.             id: id,
  200.             fileType: type,
  201.             originalFileInfoArr: JSON.stringify(arr)
  202.         }
  203.     });
  204.     if (json.returnCode == 0) {
  205.         var AuthMsg = json.result
  206.         var imgExit = arr[0].name.split('.')[1];
  207.         var ossKey = AuthMsg.dir + AuthMsg.uploadNameList[0] + '.' + imgExit;
  208.         var imgurl = AuthMsg.host + '/' + ossKey;
  209.         Toast.loading("上传中...");
  210.         // 添加签名信息
  211.         var ossData = new FormData();
  212.         ossData.append('OSSAccessKeyId', AuthMsg.accessKeyId);
  213.         ossData.append('policy', AuthMsg.policy);
  214.         ossData.append('Signature', AuthMsg.postSignature);
  215.         ossData.append('key', ossKey);
  216.         ossData.append('callback', AuthMsg.callback);
  217.         ossData.append('file', arr[0].path);
  218.         ossData.append('success_action_status', 200);
  219.         $.ajax({
  220.             url: AuthMsg.host,
  221.             data: ossData,
  222.             processData: false,
  223.             contentType: false,
  224.             type: 'POST',
  225.             success: function(res) {
  226.                 Toast.clear();
  227.                 callback(imgurl);
  228.             },
  229.             error: function(err) {
  230.                 Toast.clear();
  231.                 console.log(err);
  232.             }
  233.         })
  234.     }
  235. }
  236.  
  237. export default {
  238.         wxGetLocalImgData,
  239.         h5uploadDo,
  240.         uploadImg
  241.     }

3、在上传页中使用微信SDK和上传JS

  1. <template>
  2.   <div>
  3.    <button type="button" @click="selectImg"></button>
  4.    <img :img="form.img" />
  5.    
  6.   </div>
  7.  
  8. </template>
  9.  
  10. import wx from 'weixin-js-sdk';
  11. import wxInit from '@/util/wxInit';
  12. import compress from '@/util/compress';
  13. export
  14. default {       
  15.         data() {
  16.             return {
  17.                 form: {
  18.                    img:'',                   
  19.                 }
  20.             }
  21.         },
  22.  
  23.         mounted() {           
  24.             wxInit.wxInit(); //微信sdk初始化
  25.            
  26.         },
  27.  
  28.         methods: {
  29.  
  30.             //选择图片
  31.             selectImg() {
  32.                 var that = this;
  33.                 this.isup = true;
  34.                 wx.chooseImage({
  35.                     count: 1,
  36.                     sizeType: ['original'],
  37.                     success: function(res) {
  38.                         let localIds = res.localIds[0];
  39.                         compress.wxGetLocalImgData(localIds,
  40.                         function(blob) {
  41.                             let url = blob.preview;
  42.                             that.h5uploadDo(url);
  43.                         })
  44.                     },
  45.                 })
  46.             },
  47.  
  48.             //图片压缩
  49.             h5uploadDo(blob) {
  50.                 var that = this;
  51.                 compress.h5uploadDo(blob,
  52.                 function(res) {
  53.                     that.setImgsrc(res);
  54.                 })
  55.             },
  56.  
  57.             setImgsrc(arr) {
  58.                 var that = this;
  59.                 compress.uploadImg(136, arr, 'userQrcode',function(path) {
  60.                    that.form.img= path
  61.                 })
  62.             },
  63.         }
  64.     } < /script>

注： jquery 需要自己安装，vant也需要安装

npm install jquery --save

npm i vant -S

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/742029
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号