想剪个跟对象这两年一起吃火锅的视频,想在每张图片上加上对应的日期,于是动手写一个可以加上图片名称的工具.
基本的逻辑就是上传图片》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>
但是貌似只能保存png格式?不知道为啥