js 图片上传时加水印

  //通过file数据产生图片Dom
    function createfileImg(file) {
        return new Promise((resolve, reject) => {
            let img = new Image()
            img.src = URL.createObjectURL(file)
            //img绑定load事件（载入完毕后 返出图片Dom）
            img.addEventListener('load', () => resolve(img))
        })
    }

    //画布配置
    function handleCanvas(img) {
        // const canvas = document.createElement('canvas')
        var canvas = document.getElementById("myCanvas");
        canvas.width = 300 //也可使用图片的宽 和 高
        canvas.height = 300
        //返回一个用于绘画的环境
        const ctx = canvas.getContext('2d')
        //写入图片
        ctx.drawImage(img, 0, 0, 300, 300)
        
        //写入水印文字
        ctx.font = '700 20px microsoft yahei'
        ctx.fillStyle = '#fff'
        ctx.textAlign = 'left'
        ctx.fillStyle = 'rgba(255, 255, 255,)'
        ctx.fillText(`${moment().format("YYYY-MM-DD HH:mm:ss")}`, 20, 290);
        
        return canvas
    }


    //创建blob对象，用于展示画布上的图片
    function createCanvasBlob(canvas) {
        return new Promise((resolve, reject) => {
            canvas.toBlob(blob => resolve(blob))
        })
    }


    async function customRequest(e) {
        //拿到图片
        let fil = document.getElementById('fileId')
        //创建图片
        const img = await createfileImg(fil.files[0])
        //处理画布
        const canvas = handleCanvas(img)
       
        const blob = createCanvasBlob(canvas)
        // 转为后端要的file对象
        const newFile = new File([blob], fil.files[0].name, { type: fil.files[0].type })
        
        //正常调用上传的接口
        ........
        
    }

效果图：