文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue.js实现图片压缩封装方法

2024-04-02 19:55

关注

全局main.js引入:

// 引入imgUpload方法
import * as imgUpload from "./utils/imgUpload"
//外部使用
Vue.prototype.$imgUpload = imgUpload

新建imgUpload.js:

 const dataURLtoFile = (dataurl, filename) => { // 将base64转换为file文件
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
};
const imgZip = (file) => {
    var _this = this;
    let imgZipStatus = new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas"); // 创建Canvas对象(画布)
        let context = canvas.getContext("2d");
        let img = new Image();
        img.src = file.content; // 指定图片的DataURL(图片的base64编码数据)
        var Orientation = '';
        img.onload = () => {
            //根据情况定义
           // canvas.width = 400;
           // canvas.height = 300;
           canvas.width = img.width;
           canvas.height = img.height;
           context.drawImage(img, 0, 0, canvas.width, canvas.height);
 
           file.content = canvas.toDataURL(file.file.type, 0.5); // 0.92为默认压缩质量
            
           let files = dataURLtoFile(file.content, file.file.name);
           resolve(files)
        }
    })
    return imgZipStatus;
};
export {
    imgZip,
}

页面中使用:

//上传方法
afterCard(file) {
      this.$imgUpload.imgZip(file).then(resData => {
        const formData = new FormData();
        formData.append("file", resData);
 
        // 请求接口上传图片到服务器
        uploadImg(formData).then(res => {
 
        })
      })
}

备注:

HTMLCanvasElement.getContext()方法返回canvas的上下文,如果上下文没有定义则返回null.

在同一个canvas上以相同的contextType多次调用此方法只会返回同一个上下文。

var ctx = canvas.getContext(contextType);var ctx = canvas.getContext(contextType, contextAttributes);

上下文类型(contextType)

是一个指示使用何种上下文,可能的值是:

上下文属性(contextAttributes)

你可以在创建渲染上下文的时候设置多个属性,例如:

canvas.getContext("webgl",
                 { antialias: false,
                   depth: false });

Canvas 2D API 中的CanvasRenderingContext2D.drawImage()方法提供了多种方式在Canvas上绘制图像。

ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数:

image

绘制到上下文的元素。允许任何的 canvas 图像源

sx可选

需要绘制到目标上下文中的,image的矩形(裁剪)选择框的左上角 X 轴坐标。

sy可选

需要绘制到目标上下文中的,image的矩形(裁剪)选择框的左上角 Y 轴坐标。

sWidth可选

需要绘制到目标上下文中的,image的矩形(裁剪)选择框的宽度。如果不说明,整个矩形(裁剪)从坐标的sxsy开始,到image的右下角结束。

sHeight可选

需要绘制到目标上下文中的,image的矩形(裁剪)选择框的高度。

dx

image的左上角在目标canvas上X 轴坐标。

dy

image的左上角在目标canvas上Y 轴坐标。

dWidth可选

image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明, 在绘制时image宽度不会缩放。

dHeight可选

image在目标canvas上绘制的高度。允许对绘制的image进行缩放。 如果不说明, 在绘制时image高度不会缩放。

示例:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

Vue vant-ui使用van-uploader实现头像图片上传

https://www.jb51.net/article/248830.htm

到此这篇关于vue js实现图片压缩封装方法的文章就介绍到这了,更多相关vuejs图片压缩内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯