前端上传图片转base64编码添加水印并压缩指定大小

最新推荐文章于 2024-02-29 16:36:59 发布

Arbort_

最新推荐文章于 2024-02-29 16:36:59 发布

阅读量1.6k

点赞数 2

分类专栏： canvas 文章标签： input file base64

本文链接：https://blog.csdn.net/Arbort_/article/details/94488010

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" onchange="change(this)">
    <div id="imgBox">
        
    </div>
</body>
<script>
    function change(self){
         
        /*
        * 以下注释为上传图片
        * */
        // let inputDOM = this.$refs.inputer;
        // let param = new FormData(); //创建form对象
        // for(let key in inputDOM.files){
        //     param.append('file',files[key]);//通过append向form对象添加数据
        //  }
        // console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
        // let config = {
        //   headers:{'Content-Type':'multipart/form-data'}
        // }; //添加请求头
        // axios.post('http://localhost:8099/upload/image',param,config)
        //   .then(response=>{
        //     console.log(response.data);
        // })

        /*
        * 以下为上传图片压缩，转base64并添加水印
        * */
        console.log(self.files);
        //创建一个读取文件的对象
        let reader = new FileReader();
        //读取文件，转码
        reader.readAsDataURL(self.files[0]);
        reader.onload = function (e) {
            let base64 = e.target.result; //转码过后的base64编码
            console.log("压缩前", base64.length / 1024);
            //创建一个图片
            let newImage = new Image();
            let quality = 0.6;    //压缩系数0-1之间，压缩到0.9以上会有bug，注意！（可以自行设置）
            newImage.src = base64;
            newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
            let imgWidth, imgHeight;
            newImage.onload = function () {
                imgWidth = this.width;
                imgHeight = this.height;
                //给生成图片设置一个默认的最大宽/高（可以自行设置）
                let myWidth = 800;
                //准备在画布上绘制图片
                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext("2d");
                //判断上传的图片的宽高是否超过设置的默认最大值，以及设置同比例的宽高
                if (Math.max(imgWidth, imgHeight) > myWidth) {
                    if (imgWidth > imgHeight) {
                        canvas.width = myWidth;
                        canvas.height = myWidth * imgHeight / imgWidth;
                    } else {
                        canvas.height = myWidth;
                        canvas.width = myWidth * imgWidth / imgHeight;
                    }
                } else {
                    canvas.width = imgWidth;
                    canvas.height = imgHeight;
                }
                //清空画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                //开始绘制图片到画布上
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);

                //绘制水印
                //ctx.font="20px microsoft yahei";
                //ctx.fillStyle="rgba(255,255,255,0.5)";
                //ctx.fillText('水印文字',100,100)

                let newBase64 = canvas.toDataURL("image/jpeg", quality);//压缩图片大小（关键代码）
                // 获取到当前的图片的大小，然后调整成自己需要的大小，例如说需要200KB-500KB之间（可以自行设置）
                while (newBase64.length / 1024 > 500) {
                    quality -= 0.02;
                    newBase64 = canvas.toDataURL("image/jpeg", quality);
                }
                
                while (newBase64.length / 1024 < 200  && base64.length / 1024 > 200) {
                	quality += 0.02;
                	newBase64 = canvas.toDataURL("image/jpeg", quality);
                }
                myCallback(newBase64);//回调函数，做你想要的操作（可以自行设置）
            }
        };

    }
    function myCallback(base64) {
        console.log("压缩后", base64.length / 1024)
        document.getElementById("imgBox").innerHTML="<img src="+base64+">"
    }

</script>
</html>

Arbort_

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端上传图片转base64编码添加水印并压缩指定大小

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫