js使用canvas将本地图片上加上图片日期_canvas图片加时间戳-CSDN博客

本文链接：https://blog.csdn.net/wushuangzhen/article/details/132339441

想剪个跟对象这两年一起吃火锅的视频，想在每张图片上加上对应的日期，于是动手写一个可以加上图片名称的工具.
基本的逻辑就是上传图片》canvas绘出图片》canvas+图片日期》导出canvas成图
这里的日期，其实就是图片名称做的截取，貌似有一个Exifjs的插件可以获取图片拍摄信息，这块下次再研究
全部代码如下，cv可用，写的比较随意

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="button1">下载</button>
    <input type="file" class="file" id="file" multiple />
    <div id="mycanvs"></div>
</body>
<script>
    var file = document.getElementById('file')
    var btn1 = document.getElementById('button1')
    btn1.onclick = () => {
        var c = document.getElementsByTagName('canvas')
        for (let i = 0; i < c.length; i++) {
            down(c[i])
        }
        console.log('aa', aa)
        // down()
    }
    file.onchange = (e) => {
        for (let i = 0; i < e.target.files.length; i++) {
            var canvas = document.createElement("canvas");
            var name = e.target.files[i].name.split('.')
            var format = name[name.length - 1]
            console.log('format', format)
            canvas.setAttribute('format', format)
            console.log('format1', canvas.getAttribute('format'))
            name.pop()
            var name1 = name.join('.')
            canvas.id = name1

            var ctx = canvas.getContext("2d")
            set(e.target.files[i], canvas, ctx, name1)
            document.getElementById('mycanvs').append(canvas)
        }

        // var canvas = document.getElementById("canvas");
        // // canvas.width = 240;
        // // canvas.height = 240;
        // var ctx = canvas.getContext("2d");
    }
    function set(file, canvas, ctx, name1) {
        // var box = document.getElementById('box')
        // box.appendChild(img)

        var img = new Image()
        img.src = URL.createObjectURL(file);
        // canvas.width = 240;
        // canvas.height = 240;
        img.onload = function () {
            console.log('w', img.width)
            console.log('h', img.height)
            canvas.width = img.width
            canvas.height = img.height
            ctx.drawImage(this, 0, 0);
            ctx.fillStyle = '#ff0000';
            ctx.font = '20px Arial';
            ctx.fillText(`${name1}`, 30, 30)//要写的字和要放的位置
        }
    }
    function down(canvas) {
        console.log('down1', canvas.getAttribute('format'))
        format = canvas.getAttribute('format')
        console.log('format', format)
        var link = document.createElement("a");
        var imgData = canvas.toDataURL({ format: format, quality: 1, width: 20000, height: 4000 });
        var strDataURI = imgData.substr(22, imgData.length);
        var blob = dataURLtoBlob(imgData);
        var objurl = URL.createObjectURL(blob);
        link.download = canvas.id;
        link.href = objurl;
        link.click();

        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        }
    }
</script>

</html>