Vue使用mixins实现压缩图片代码
程序员文章站
2022-07-10 23:26:16
本文介绍了vue使用mixins实现压缩图片代码,分享给大家,具体如下:
图片压缩
创建mixins image-compress.js
export...
本文介绍了vue使用mixins实现压缩图片代码,分享给大家,具体如下:
图片压缩
创建mixins image-compress.js
export default { methods: { /** * 检查并压缩图片大小 */ checkandhandlecompression(file) { return new promise((resolve, reject) => { this.imgbase64(file, (image, canvas) => { let maxsize = 2 * 1024; // 2m (单位kb) let filesize = file.size / 1024; // 图片大小 (单位kb) let uploadsrc, uploadfile; if (filesize > maxsize) { // 如果图片大小大于maxsize,进行压缩 uploadsrc = canvas.todataurl(file.type, maxsize / filesize); uploadfile = this.convertbase64urltofile(uploadsrc, file.name); // 转成file文件 } else { uploadsrc = image.src; uploadfile = file; } let compressedsize = uploadfile.size / 1024;// 压缩后图片大小 (单位kb) // 判断图片大小是否小于maxsize,如果大于则继续压缩至小于为止 if (compressedsize.tofixed(2) > maxsize) { this.checkandhandleupload(uploadfile); } else { let fileoptions = {uploadsrc, uploadfile}; resolve(fileoptions); } }); }); }, /** * 将图片转化为base64 */ imgbase64(file, callback) { // 看支持不支持filereader if (!file || !window.filereader) return; // 创建一个 image 对象 let image = new image(); // 绑定 load 事件处理器,加载完成后执行 image.onload = function () { // 创建 canvas dom 对象 let canvas = document.createelement('canvas'); // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型 let ctx = canvas.getcontext('2d'); // 如果高度超标 // 参数,最大高度 let max_height = 3000; if (image.height > max_height) { // 宽度等比例缩放 *= image.width *= max_height / image.height; image.height = max_height; } // 获取 canvas的 2d 环境对象, // 可以理解context是管理员,canvas是房子 ctx.clearrect(0, 0, canvas.width, canvas.height); // 重置canvas宽高 canvas.width = image.width; canvas.height = image.height; // 将图像绘制到canvas上 ctx.drawimage(image, 0, 0, image.width, image.height); callback(image, canvas); }; if (/^image/.test(file.type)) { // 创建一个reader let reader = new filereader(); // 将图片将转成 base64 格式 reader.readasdataurl(file); // 读取成功后的回调 reader.onload = function () { // 设置src属性,浏览器会自动加载。 // 记住必须先绑定事件,才能设置src属性,否则会出同步问题。 image.src = this.result; }; } }, /** * 把base64转换成file文件 */ convertbase64urltofile(dataurl, filename) { let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new uint8array(n); while (n--) { u8arr[n] = bstr.charcodeat(n); } return new file([u8arr], filename, {type: mime}); } } };
example
<template> ... </template> <script> import imageuploadmixins from '@/mixins/image-compress'; export default { mixins: [imageuploadmixins], ... methods:{ handleuploadimage(e){ let file = e.target.files[0]; this.checkandhandlecompression(file).then( fileoptions => { // let {uploadsrc, uploadfile} = fileoptions; // 压缩完成使用 uploadsrc, uploadfile ... }); } } ... } </script> <style> ... </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读