前端图片上传压缩-图片上传前端代码

原理：利用canvas来实现，将图片绘制到canvas上，然后canvas转图片时，微信提供的一个方法wx.canvasToTempFilePath(Object object, Object this)，此方式可以指定生成图片的质量前端图片上传压缩，下图是从官方API截的图：

其中quality可以指定图片的质量，quality的值越小，图片越模糊，通过此方法可以实现图片的压缩

注意：

1.quality设置只对jpg格式的图片有效，使用时要将fileType设置为“jpg”， 此举可能会导致其它格式的图片变为jpg格式
2.透明背景的png图片，绘制到canvas上使用此方式导出的图片是黑色背景，有需求的话是需要canvas先设置背景色的，请小伙伴们注意爬坑。
复制代码

有了这个参数，压缩就简单很多了前端图片上传压缩，下面是代码：

wxml

 选择图片


 

点击下载压缩后的图片
 

js

Page({
 data: {
 imagePath: '',
 quality: 0.2
 },
 onLoad: function (options) {
 
 },
 /**
 * 选项添加图片事件
 */
 chooseImage: function (e) {
 var that = this;
 wx.chooseImage({
 sizeType: ['compressed'], //可选择原图或压缩后的图片
 sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
 success: result => {
 wx.getImageInfo({
 src: result.tempFilePaths[0],
 success: function (res) {
 that.setData({
 cWidth: res.width,
 cHeight: res.height
 })
 that.getCanvasImg(result.tempFilePaths, res.width, res.height, that.data.quality, function (res) {
 that.setData({
 imagePath: res.tempFilePath
 });
 });
 }
 })
 }
 })
 },
 /**
 * 质量压缩
 */
 getCanvasImg(tempFilePaths, canvasWidth, canvasHeight, quality, callback) {
 var that = this; 
 const ctx = wx.createCanvasContext('attendCanvasId');
 ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight);
 ctx.draw(false, function () {
 wx.canvasToTempFilePath({
 canvasId: 'attendCanvasId',
 fileType: 'jpg',
 quality: quality,
 success: function success(res) {
 callback && callback(res)
 }, fail: function (e) {
 wx.showToast({
 title: '图片上传失败，请重新上传！',
 icon: 'none'
 })
 }
 });
 });
 },
 /**
 * 图片保存到相册
 */
 save(e) {
 let that = this;
 wx.saveImageToPhotosAlbum({
 filePath: that.data.imagePath,
 success: function (res) {
 console.log('图片已保存');
 },
 fail: function (res) {
 console.log('保存失败');
 }
 })
 },
})

注意点：

注意设置canvas-id='attendCanvasId'canvas要离屏渲染，就是移出屏幕之外，但是元素还是显示的，position: fixed;top: -9999px;left: -9999px; 不能使用 display: none; 这样是获取不到canvas元素的。

最后

h5页面中也有提供这样的方法

例如这样子：

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
ctx.drawImage(imagePath, 0, 0, w, h);
canvas.toDataURL('image/jpeg', quality);