说明
项目需要,手机通过扫码打开页面上传商品图片,手机拍出来的图片一般都是长方形,而我们的商品图片则需要正方形. 解决方案是长宽哪个长就截取哪边.这个我用的是提交图片截取坐标到服务器上再截取.这里用到的是cropper这个插件. 现在手机拍照像素都比较高,图片太大,上传不方便,这时候就需要在上传前压缩下图片.之前有找到一个叫resize.min.js的压缩插件,发现有问题,PC上测试没问题,iphone 上测试大于4M以上的图片返回的base64不正常,无法显示图片.后来使用html5ImgCompress,倒是没发现这个问题!! 出于VUE是后来为了样式才加上的,所有变成jquery与vue一锅炖,显得有点乱哈~
###html端
选 择 图 片
js端
var vm = new Vue({ el: '#app', data: { fileData: '', //图片文件 coord: '' //坐标串 }, methods: { choiceImg: function () { this.$dialog.loading.open('图片加载中...'); }, submitUpload: function(){ var that = this; var formData = new FormData(); formData.append("logo",this.fileData); formData.append('coord', this.coord); $.ajax({ url: "服务器路径", type: 'POST', data: formData, processData: false, contentType: false, beforeSend: function () { if(!that.fileData){ that.$dialog.toast({ mes: '未选择图片!', timeout: 1500, icon: 'error' }); return false; } that.$dialog.loading.open('图片上传中...'); }, complete: function () { that.$dialog.loading.close(); }, success: function (res) { console.log(res); if(res.r){ var icon = 'success'; }else{ var icon = 'error'; } that.$dialog.toast({ mes: res.i, timeout: 1500, icon: icon, callback: () => { window.location.reload(); } }) }, error: function (res) { console.log(res); that.$dialog.toast({ mes: '上传失败', timeout: 1500, icon: 'error' }) } }); } } }); /** base64转成文件,网上找的,看起来有点老了 */ function dataURItoBlob(dataURI) { var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) { byteString = atob(dataURI.split(',')[1]); }else { byteString = unescape(dataURI.split(',')[1]); } var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], {type:mimeString}); } $(function () { var $image = $('#image'); //jquery监听图片选择 $('input[type=file]').on('change', function () { var file = $(this)[0].files[0]; new html5ImgCompress(file, { before: function(file) { console.log('单张: 压缩前...'); }, done: function (file, base64) { console.log('单张: 压缩成功...'); $image.cropper('destroy'); $image.attr('src', base64); vm.fileData = dataURItoBlob(base64); $image.cropper({ viewMode: 1, aspectRatio: 1 / 1, height: 600, width: 600, autoCropArea: true, dragCrop: false, rotatable: false, zoomable: false, zoomOnTouch: false, zoomOnWheel: false, cropBoxResizable: false, minCropBoxWidth: 600, minCropBoxHeight: 600, crop: function (e) { console.log(e.x); console.log(e.y); console.log(e.width); console.log(e.height); vm.coord = JSON.stringify(e); vm.$dialog.loading.close(); } }); }, fail: function(file) { console.log('单张: 压缩失败...'); }, complete: function(file) { console.log('单张: 压缩完成...'); }, notSupport: function(file) { alert('浏览器不支持！'); } }); }); }) 上传前
上传并刷新页面后
