图片上传时用Canvas 压缩和加水印

最新推荐文章于 2025-03-07 15:59:06 发布

路过春天的雨点

最新推荐文章于 2025-03-07 15:59:06 发布

阅读量317

点赞数

分类专栏： JavaScript 文章标签： js javascript css canvas html5

本文链接：https://blog.csdn.net/qq_44938782/article/details/111659879

版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

这个示例展示了如何使用HTML5 Canvas来压缩图片并添加水印。用户可以选择图片，然后通过FileReader读取，将图片数据转换为Base64编码，再在Canvas上进行绘制、压缩和添加水印，最后将压缩后的图片显示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用菜鸟教程模拟的

菜鸟对应链接 https://www.runoob.com/try/try-cdnjs.php?filename=tryhtml5_canvas_tut_img

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<img id="screamaa" src="" alt="The Scream" width="220" height="277">
      <input type="file"
              id="uploadFile"
              accept="image/*"
            />
<script>

var imgff= function (base64){
      var bili = 0.7; //压缩后的图片尺寸,0.7就是70%
     
var img=new Image() 
img.src = base64
    console.log("img.width", img.width,"height", img.height)
img.crossOrigin = "Anonymous";
img.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
      //图片地址加载完后执行操作
        var newWidth = img.width; //压缩后图片的宽度
        var newHeight = img.height; //压缩后图片的高度
        c.width = newWidth; //压缩图的宽度
        c.height = newHeight; //压缩图的高度
        ctx.drawImage(img, 0, 0, newWidth,newHeight); //压缩 把图片放到画布上
    
    ctx.font="30px Arial";
    ctx.fillStyle = "#ffffff"; //设置水印
    ctx.fillText("你好", 40, 40); //选择水印位置
    
    
    let newBase64 = c.toDataURL("image/jpeg", 0.7);//压缩的模糊度 数字越小越模糊
    console.log("dnewBase64",newBase64)
    var c=document.getElementById("screamaa");
    c.src =newBase64
} 
}

 var eleUploadFile = document.getElementById('uploadFile');
    
   eleUploadFile.addEventListener('change', function(event) {
        var file = event.target.files[0] || event.target.dataTransfer.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var base64 = e.target.result;
            // canvas压缩图片，并且回调显示
            imgff(base64)
        }
        reader.readAsDataURL(file);
    });

</script>

</body>
</html>