weui js imageConversion压缩图片
时间: 2023-08-22 21:07:48 浏览: 68
weui js中的imageConversion插件可以用于压缩图片。您可以按照以下步骤进行操作:
1. 首先,引入weui js和imageConversion插件:
```
<script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-canvas-to-blob/3.14.0/js/canvas-to-blob.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-load-image/5.8.2/js/load-image.all.min.js"></script>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/vendor/jquery.ui.widget.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-image.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-process.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-validate.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-ui.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.iframe-transport.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-jquery-ui.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-ui.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-process.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-validate.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-image.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.19.0/js/jquery.fileupload-video.min.js"></script>
```
2. 创建一个input标签,用于上传图片:
```
<input type="file" id="fileInput">
```
3. 编写JavaScript代码,调用imageConversion插件的compressImage方法来压缩图片:
```
$('#fileInput').on('change', function() {
var file = this.files[0];
if (!file) return;
// 压缩图片
weui.imageCompression.compressImage(file, {
quality: 0.8,
maxWidth: 640,
maxHeight: 640,
onProgress: function(progress) {
console.log(progress);
},
onError: function(err) {
console.log(err);
},
onComplete: function(blob) {
// blob即为压缩后的图片
console.log(blob);
}
});
});
```
在上述代码中,quality表示压缩质量,maxWidth和maxHeight表示图片的最大宽度和高度。onProgress、onError和onComplete分别表示压缩过程中的进度、错误和压缩完成的回调函数。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)