图片添加水印

最新推荐文章于 2022-11-08 23:28:21 发布

baiduren！

最新推荐文章于 2022-11-08 23:28:21 发布

阅读量207

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42454941/article/details/109474105

版权

watermark.js

function watermark(conf,callback){
    fileToBase64(conf.File,function(base64Data){
        var  img = new Image();
        img.src = base64Data;
        img.onload = function (){
            addmark(conf,img,callback)
        }
        img.onerror =  function(err){
            console.log(err)
        }
    })
}
function fileToBase64(File,callback){
    var reader = new FileReader();
    if(File){
        reader.readAsDataURL(File)
        reader.onload=function(){
            var base64Data = reader.result;
            callback(base64Data)
        }
    }
}
function addmark(conf,img,callback){
    var config = {
        left:200,//距左距离
        top:300,//距上距离
        width:500,//宽度
        height:100,//高度
        fillStyle:'rgb(255,0,0)',//颜色
        font:'50px Aril bold',//字体
        fillText:'水印，水印'//内容
    }
    Object.assign(config,conf)
    var w = img.width
    var h = img.height;
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    canvas.width = w;
    canvas.height = h;
    ctx.fillStyle = '#fff';
    ctx.fillRect(0,0,w,h)
    ctx.drawImage(img,0,0,w,h)

    var watercanvas = document.createElement('canvas')
    var waterctx = canvas.getContext('2d')
    watercanvas.width=config.width;
    watercanvas.height= config.height
    waterctx.font=config.font;
    waterctx.fillStyle=config.fillStyle
    waterctx.fillText(config.fillText,config.left,config.top)
    ctx.drawImage(watercanvas,0,0,canvas.width-watercanvas.width,canvas.height-watercanvas.height)

    var watermarkbase64 = canvas.toDataURL('image/jpeg');
    callback(watermarkbase64)


}

使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./watermark.js"></script>
</head>
<body>
    <input type="file" id="file">
    <button id="add">添加水印</button>
    <img src="" id="resimg">
    <script>
        var file = document.getElementById('file')
        var addBtn = document.getElementById('add')
        var resimg = document.getElementById('resimg')
        addBtn.addEventListener('click',function(){
            var f = file.files[0]
            watermark({
                File:f,//必填
            },function(data){
                resimg.src = data
            })
        })
    </script>
</body>
</html>