使用Canvas和Base64实现上传头像

最新推荐文章于 2022-12-26 13:24:29 发布

CharlesX5

最新推荐文章于 2022-12-26 13:24:29 发布

阅读量165

点赞数 2

文章标签： servlet javascript java

本文链接：https://blog.csdn.net/CharlieP/article/details/126494063

版权

/定义正则表达式限制上传图片类型。//获取文件列表：files[0]代表图片的信息,赋值给变量uploadImg。//生成base64（图片对象就是mycanvas画布里的图片）//动态生成下载按钮（a标签的download属性来实现）alert("上传的文件必须为 jpeg或png")alert("上传的文件必须小于 2MB");//生成临时访问路径。/* 获取上传的文件信息 *///type是文件类型。//绘制logo的灰色背景。

摘要由CSDN通过智能技术生成

let mycanvas = document.getElementById('mycanvas');
        let NowCanvas = null;
        let cxt = mycanvas.getContext('2d');

        //绘制logo的灰色背景
        cxt.fillStyle ="rgba(255,255,255,.6)";
        cxt.fillRect(0,320,500,200);

        //绘制logo
        let logoImg = new Image()
        logoImg.src = 'img/wt43logo.png';
        logoImg.onload = function(){
            //绘制logo
            cxt.drawImage(logoImg,95,320,logoImg.width/1.5,logoImg.height/1.5);
            cxt.globalCompositeOperation="destination-over";
            NowCanvas=cxt.getImageData(0,0,500,500);
        }


        /* 获取上传的文件信息 */
        document.getElementById('file').οnchange= function(){

//获取文件列表：files[0]代表图片的信息,赋值给变量up

最低0.47元/天解锁文章

CharlesX5

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
使用Canvas和Base64实现上传头像

/定义正则表达式限制上传图片类型。//获取文件列表：files[0]代表图片的信息,赋值给变量uploadImg。//生成base64（图片对象就是mycanvas画布里的图片）//动态生成下载按钮（a标签的download属性来实现）alert("上传的文件必须为 jpeg或png")alert("上传的文件必须小于 2MB");//生成临时访问路径。/* 获取上传的文件信息 *///type是文件类型。//绘制logo的灰色背景。
复制链接

扫一扫