微信小程序上传图片压缩方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序上传图片压缩方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序上传图片需要进行压缩，可以使用wx.getFileSystemManager()方法将图片转换成base64格式，再使用canvas将图片压缩成指定大小。


//选择图片

wx.chooseImage({

    count:  1,  //最多选择1张图片

    success:  function(res)  {

        var  tempFilePaths  =  res.tempFilePaths;  //获取图片本地路径

        //将图片转换成base64格式

        wx.getFileSystemManager().readFile({

            filePath:  tempFilePaths[0],

            encoding:  'base64',

            success:  function(data)  {

                //创建canvas进行压缩

                var  imgData  =  'data:image/png;base64,'  +  data.data;

                var  image  =  new  Image();

                image.src  =  imgData;

                image.onload  =  function()  {

                    //压缩图片，并绘制到canvas上

                    var  canvas  =  document.createElement('canvas');

                    var  context  =  canvas.getContext('2d');

                    var  originWidth  =  this.width;

                    var  originHeight  =  this.height;

                    var  maxWidth  =  1280,  //设置最大的宽度

                            maxHeight  =  1280,  //设置最大的高度

                            targetWidth  =  originWidth,

                            targetHeight  =  originHeight;

                    if  (originWidth  >  maxWidth  ||  originHeight  >  maxHeight)  {

                        if  (originWidth  /  originHeight  >  maxWidth  /  maxHeight)  {

                            targetWidth  =  maxWidth;

                            targetHeight  =  Math.round(maxWidth  *  (originHeight  /  originWidth));

                        }  else  {

                            targetHeight  =  maxHeight;

                            targetWidth  =  Math.round(maxHeight  *  (originWidth  /  originHeight));

                        }

                    }

                    canvas.width  =  targetWidth;

                    canvas.height  =  targetHeight;

                    context.clearRect(0,  0,  targetWidth,  targetHeight);

                    context.drawImage(image,  0,  0,  targetWidth,  targetHeight);

                    //将canvas转换成图片base64格式

                    var  imageData  =  canvas.toDataURL('image/png');

                    var  base64Data  =  imageData.replace(/^data:image\/\w+;base64,/,  "");

                    //调用接口上传图片

                    wx.uploadFile({

                        url:  '接口地址',

                        filePath:  tempFilePaths[0],

                        name:  'file',

                        formData:  {

                            'content':  base64Data

                        },

                        success:  function(res)  {

                            //上传成功

                        },

                        fail:  function()  {

                            //上传失败

                        }

                    })

                }

            }

        })

    }

})

首先使用wx.chooseImage()方法选择了一张图片，然后使用wx.getFileSystemManager()方法将图片转换成base64格式。接着使用canvas进行压缩，并将canvas转换成图片base64格式，最后调用接口上传图片。在压缩过程中，设置了最大宽度和高度为1280，可以根据实际需求进行调整文章来源地址https://www.toymoban.com/news/detail-513280.html

到了这里，关于微信小程序上传图片压缩方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！