背景
前端做一些个人项目,没有UI实在太难搞了,PS又需要学习成本,就想着用一些设计网站做一些图,做好之后发现要Vip,想着个人项目不商用,截个图,做一下效果,做着做着就想是不是做一个插件自动去一下水印岂不是更好。
说干就干
- 粗略的学习了一下谷歌插件
- 分析一下某站的水印位置(明水印,听大佬说有暗水印,暂不考虑)
- 手动分析(F12直接看,哈哈)
- 发现水印处于image-watermark该类名的背景图片位置
- 还有一些可能是一个单独的元素。
- 接下来就是找到该元素删除即可(手动删除也可以,以前就是这样干的)
谷歌插件
- 编写一些简单的操作界面(popup.html)
- 采用html2canvas来下载图
- 将dom转成图片
const downloadPng = () => { if(!shareContent) return let rect = shareContent.getBoundingClientRect() let opts = { x: rect.left, y: rect.top, scale: window.devicePixelRatio*2, useCORS: true , } html2canvas(shareContent, opts).then(canvas => { let img = new Image(); img.src = canvas.toDataURL(); var a = document.createElement('a'); a.download = '无水印图' a.href = img.src; document.body.appendChild(a); a.click(); document.body.removeChild(a);
- html2canvas的坑实在有点多,图片跨域问题设置 useCORS: true
- 部分样式问题,暂无法解决
- 就简单的popup.js与content.j简单的通信一些就可以完成
function sendMessageToContentScript(message, callback) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
if (callback) callback(response);
});
});
}
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.remove) {
removeFigureMonster();
};
if (request.download) {
downloadPng()
}
});
- manifest.json 文件是插件核心文件
{
"manifest_version": 2 ,
"name":"去水印!",
"version": "0.0.1",
"description":"去除主流作图网站的明水印,并下载!",
"icons":
{
"16": "libs/icon/logo1.png",
"48": "libs/icon/logo1.png",
"128": "libs/icon/logo1.png"
},
"background":
{
"page": "libs/html/background.html"
},
"browser_action":
{
"default_icon": "libs/icon/logo1.png",
"default_title": "去除主流作图网站的明水印,并下载!",
"default_popup": "libs/html/popup.html"
},
"content_scripts": [
{
"matches":["<all_urls>"],
"js":["/libs/plugin/htmltocanvas.js","libs/js/content.js"],
"run_at": "document_start"
}
],
"permissions":
[
"contextMenus"
]
}
自此一个谷歌插件就简单的完成
- 可以一键去水印然后下载
- 应该其他设计网站大同小异
源代码
最后
以上仅仅为技术交流~ 大家不要在实际的场景盲目使用,使用正规的途径。商用还需购买版权,支持原创!