写了个莱卡水印生成器,小米不会告我吧?
引子
好久没关注手机,最近听了雷布斯的演讲【全程回放】2022雷军年度演讲 - 西瓜视频,才发现小米跟莱卡达成战略合作,出了款Xiaomi 12S Ultra小米莱卡镜头手机。
先不说小米莱卡拍照如何,单看照片下面的可乐标水印,德味感扑面而来。网友纷纷表示“毒”啊,于是就有网友制作了小米水印生成器。
小米水印生成器 - V2EX
这个生成器非常好用,但也发现几个小问题:
1. 没有使用小米字体
2. 不能读取原照片文件名
3. 不能读取照片拍摄时间、修改时间
4. 修改了原来的照片尺寸,下载图片尺寸固定
于是我就在这个网页的UI基础上加上了以上几个功能。
莱卡水印生成器 by 码中人
实现原理
以前写过一个代码截图小工具,是通过 html2canvas 把 html 元素渲染成图片下载下来。这次原理类似,就是在图片下面排版好leica水印信息,再通过 html2canvas 将图片与水印信息的容器元素渲染成图片。
全部为前端技术,包括:
• html2canvas
• react
• tailwind csss。
CodeImg 代码截图 by 码中人 so easy...自制代码截图工具 – 码中人的博客
具体实现
初始化项目
• create-react-app
• 安装配置tailwindcss
• Install Tailwind CSS with Create React App - Tailwind CSS
• 安装 html2canvas - Screenshots with JavaScript
• yarn add html2canvas
通过 tailwind css 实现UI
导入小米字体
MIUI 13 采用全新系统字体 MiSans。笔型平直有力,设计更加简约,减少视觉负担,更有利于屏幕显示。共包含29,093个字符,支持多种语言。MiSans 提供了多种 OpenType 功能,可根据特定需求来选择不同形态的字符,例如某些标点符号可以根据周围字母的形态自动调整至合适的位置。MiSans字重齐全,层级清晰,10个字重全部开放下载,供全社会免费商用。
下载链接:MiSans字体下载
@font-face {
font-family: "MiSans";
font-weight: 400;
src: url("./fonts/MiSans-Normal.ttf");
}
body{
font-family: MiSans;
}
通过 FileReader 读取本地照片
通过<input type="file">
接收图片文件。
<input type="file" accept="image/*" className="hidden" id='select-image' onChange={handleFileChange}></input>
选择图片文件后,触发input onchange 事件,调用FileReader
读取文件内容。
const handleFileChange = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
setImgSrc(e.target.result)
}
}
FileReader.readAsDataURL() - Web API 接口参考 | MDN
readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend (en-US) 事件,同时 result 属性将包含一个data:URL 格式的字符串(base64 编码)以表示所读取文件的内容。
最后 setImgSrc(e.target.result)
将图片内容加载显示出来。
读取上传图片名称和最后修改时间,全局保存
+ const {setImageName,setImageDate} = useContext(ImageContext);
const handleFileChange = (e) => {
const file = e.target.files[0];
+ setImageName(file.name);
+ setImageDate(file.lastModifiedDate);
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
setImgSrc(e.target.result)
}
}
点击下载图片
读取图片的 naturalWidth 与图片的显示宽度相比较,得到缩小比例值。生成图片宽度时放大该比例,这样图片大小就跟原来一样。
HTMLImageElement.naturalWidth - Web APIs | MDN
const downloadImage = (selector, name = "莱卡水印-by-码中人.png") => {
const img = $('#selected-image');
const width = img.width;
const naturalWidth = img.naturalWidth;
const scale = naturalWidth / width;
const el = document.querySelector(selector);
html2canvas(el, { // 转换为图片
useCORS: true, // 解决资源跨域问题
scale: scale, // 设置图片放大倍数
}).then(canvas => {
let imgUrl = canvas.toDataURL('image/png');
mockDownload(imgUrl, name)
})
}
模拟下载即可。
const mockDownload = (imgsrc, name) => {
const aLink = document.createElement('a');
aLink.download = name;
aLink.href = imgsrc;
aLink.click();
}
下一步内容
PC端正常好用。手机端的水印排版有问题,input 内文字显示不全。哪位大神帮小弟修复一下。
小米字体MiSans 特别的大,第一次加载非常慢,有待进一步优化。
视频演示
小米莱卡水印生成器_哔哩哔哩_bilibili
代码下载
mzhren/xiaomi-leica
往期推荐
欢迎关注我的公众号“码中人”,原创技术文章第一时间推送。