【小书签】【油猴子】网页摘抄&笔记卡片生成工具

选中页面中的一段文字,然后点击小书签,会有一个文字输入框,在里面写入自己的一些感想和笔记,然后生成下面样式的卡片,大概可以用来做笔记或者分享。

当然你也可以不选择文字,或者不写入笔记。如果这两样你都不做,那就只剩下一个顶部的日历了,大概可以用来记录一下当前的时间吧。

反正就是这样,至于用途,就大家自行挖掘吧。

效果演示:

图片有点长,最好在新标签页中查看大图,这样获得的感受比较准确

代码:

复制代码,然后当做网址,保存为书签即可

javascript:/* NoteCard.V1.2.1.2021-10-16 */!function(){"use strict";const o="V1.2.1",r="https://r.izyx.xyz/#note",c={width:720,selection:window.getSelection().toString().trim()},d=["Sun.","Mon.","Tues.","Wed.","Thur.","Fri.","Sat."];let l=document.title,h=window.location.href;const s=document.createElement("canvas"),g=s.getContext("2d"),t=document.createElement("div"),f=t.attachShadow({mode:"open"}),u=t=>9<t?t:"0"+t,w=(t,e=new Date)=>{var a={YYYY:e.getFullYear(),MM:u(e.getMonth()+1),DD:u(e.getDate()),hh:u(e.getHours()),mm:u(e.getMinutes()),ss:u(e.getSeconds()),EE:d[e.getDay()]};if(!t)return+e;for(const n in a){var i=new RegExp(n,"g");t=t.replace(i,a[n])}return t},p=(a,t,i,n=0)=>{if(0===t.replace(/\s/g,"").length)return[];const o=[];for(const l of t.replace(/(\r?\n\s*)+/g,"\n").split(/\s*\r?\n\s*/g)){const h=[];let e=0;for(let t=0;t<=l.length;t++){var r=h.length?i:i-n;a.measureText(l.substring(e,t)).width>r?(h.push(l.substring(e,t-1)),e=t-1):t===l.length&&h.push(l.substring(e,t))}o.push(h)}return o},x=async(a,t,i,e,n,o=0,r=0)=>{let l=e;return t.forEach((t,e)=>{t.forEach((t,e)=>{e=e?i:i+r;l+=n,a.fillText(t,e,l)}),l+=o}),l},m=(t,e,a=0)=>(t.length-1)*a+t.flat().length*e,v=t=>{const e=t.split(",");t=e[0].match(/:(.*?);/)[1];const a=atob(e[1]);let i=a.length;const n=new Uint8Array(i);for(;i--;)n[i]=a.charCodeAt(i);return new Blob([n],{type:t})},F=(t,e)=>{s.width=c.width,s.height=t,g.fillStyle=e,g.fillRect(0,0,s.width,s.height)},y=(i,n,o,r,l=0)=>{F(.7*o,"#FFFFFF");return[0,1].forEach(t=>{var e=(.25+.5*t)*o,a=.22*o,t=l?.25*o:i.height-.25*o;n.beginPath(),l?(n.arc(e-.8*a,t,1.8*a,0,Math.PI/2,!1),n.arc(e-2.6*a,t,1.8*a*Math.sqrt(2),.25*Math.PI,0,!0)):(n.arc(e+.8*a,t,1.8*a,Math.PI,-Math.PI/2,!1),n.arc(e+2.6*a,t,1.8*a*Math.sqrt(2),.75*-Math.PI,Math.PI,!0)),n.fillStyle=r,n.fill(),n.beginPath(),n.arc(e,t,a,0,2*Math.PI,!0),n.fillStyle=r,n.fill()}),{canvasData:n.getImageData(0,0,i.width,i.height),height:i.height}},e=async()=>{var t;c.now=new Date,c.note=f.querySelector("textarea#dms-quick-note").value.trim();const e=[await(async()=>{const i=c.now.getDay(),a=c.now-864e5*i,t=new Array(7).fill().map((t,e)=>new Date(a+864e5*e).getDate()),n=c.width/16;var e=c.width/12,o=2*e;const r=c.width/18,l=o+2.5*r,h=o+2*r;return F(l+r+e/2,"#FFFFFF"),g.font="900 "+e+'px "Microsoft YaHei"',g.textAlign="right",g.fillStyle="#99999F",g.fillText(w("YYYY-MM",c.now),s.width/2-e/2,o),g.font="200 "+e+'px "Microsoft YaHei"',g.textAlign="left",g.fillStyle="#99999F",g.fillText(w("hh:mm:ss",c.now),s.width/2+e/2,o),g.textAlign="center",t.forEach((t,e)=>{var a=2*(e+1)*n;e===i?(g.beginPath(),g.arc(a,h,1.1*n,0,2*Math.PI,!0),g.fillStyle="#E0626B",g.fill(),g.fillStyle="#FFFFFF"):g.fillStyle="#333338",g.font="400 "+r+'px "Microsoft YaHei"',g.fillText(t,a,l),e&&i!==e||(g.font="200 "+.6*r+'px "Microsoft YaHei"',g.fillText(d[e],a,l-r))}),{canvasData:g.getImageData(0,0,s.width,s.height),height:s.height}})()];c.selection&&c.selection.length&&(t=await(async()=>{var t=c.width/24,e=1.6*t,a=.8*t,i=8*t,n=y(s,g,i,"#F3F3F6",0),o=y(s,g,i,"#F3F3F6",1);g.font="400 "+t+'px "Microsoft YaHei"';var r=p(g,c.selection,.8*c.width,2*t);return F(m(r,e,a)+c.width/5,"#FFFFFF"),g.putImageData(n.canvasData,0,0),g.putImageData(o.canvasData,s.width-i,s.height-o.height),g.textAlign="left",g.fillStyle="#333338",g.font="400 "+t+'px "Microsoft YaHei"',await x(g,r,c.width/10,c.width/10-(e-t),e,a,2*t),{canvasData:g.getImageData(0,0,s.width,s.height),height:s.height}})(),e.push(t),t=await(async()=>{var t=c.width/40,e=1.2*t,a=.4*t;g.font="200 "+t+'px "Microsoft YaHei"';var i=p(g,"——《"+l+"》",.8*c.width-2*t,2*-t),n=p(g,h,.8*c.width-2*t,0),o=c.width/10+m(i,e,0)+m(n,e,0)+a;return F(o,"#FFFFFF"),g.textAlign="right",g.fillStyle="#66666C",g.font="200 "+t+'px "Microsoft YaHei"',await x(g,i,.9*c.width,0-(e-t),e,a),await x(g,n,.9*c.width,0-(e-t)+m(i,e,0)+a,e,a),{canvasData:g.getImageData(0,0,s.width,s.height),height:s.height}})(),e.push(t)),c.note&&c.note.length&&(a=await(async()=>{var t=c.width/24,e=1.6*t,a=.8*t;g.font="400 "+t+'px "Microsoft YaHei"';var i=p(g,c.note,.8*c.width,2*t);return F(m(i,e,a)+c.width/10,"#FFFFFF"),g.textAlign="left",g.fillStyle="#333338",g.font="400 "+t+'px "Microsoft YaHei"',await x(g,i,c.width/10,0-(e-t),e,a,2*t),{canvasData:g.getImageData(0,0,s.width,s.height),height:s.height}})(),e.push(a));a=c.width/48,F(a+c.width/10,"#F3F3F9"),g.textAlign="center",g.fillStyle="#99999C",g.font="400 "+a+'px "Microsoft YaHei"',g.fillText("网页笔记卡片生成器 "+o+"   "+r,c.width/2,c.width/20+a),a=await{canvasData:g.getImageData(0,0,s.width,s.height),height:s.height};e.push(a),s.width=c.width;var a=e.reduce((t,e)=>t+e.height,0);F(a,"#FFFFFF");let i=0;for(const n of e)g.putImageData(n.canvasData,0,i),i+=n.height;((t,e,a)=>{t=t.toDataURL("image/"+(a="jpg"===a?"jpeg":a)),t=v(t),t=URL.createObjectURL(t);const i=document.createElement("a");i.download=e+"."+("jpeg"===a?"jpg":a),i.href=t,i.click()})(s,w("YYYY_MM_DD_hh_mm_ss",c.now)+"_"+String(w(!1,c.now)).substring(10),"png")},a=()=>{let t=w("**YYYY-MM-DD** hh:mm:ss")+"\n\n";c.selection&&(t+="> "+c.selection.replace(/(\s*\r?\n\s*)+/g,"\n> \n> ")+"\n>\n",t+="> ——["+l+"]("+h+")\n\n");const e=document.querySelector("textarea#dms-quick-note").value.trim();e&&(t+=e.replace(/(\s*\r?\n\s*)+/g,"\n\n")),(t=>{const e=document.createElement("textarea");e.setAttribute("readonly","readonly"),e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)})(t)},i=()=>{f.querySelector("button#generate-note-card").removeEventListener("click",e),f.querySelector("button#generate-note-markdown").removeEventListener("click",a),f.querySelector("button#close").removeEventListener("click",i),document.querySelector("html").removeChild(t)};c.selection=window.getSelection().toString().trim(),l=document.title,h=window.location.href,f.innerHTML=`<style>div#note-card {position: fixed;box-sizing: border-box;left: 50%;top: 10px;width: 640px;max-width: 100vw;height: 720px;min-height: 360px;max-height: 100vh;padding:12px;box-shadow: 0 3px 48px rgba(0, 0, 0, .2);border-radius: 6px;transform:translate(-50%, 0);z-index: 2147483647;backdrop-filter: blur(8px);font-family: "Microsoft YaHei";}div#note-card > div.flex-area {display: flex;}div#note-card > div#text-area {align-items: stretch;height: calc(100% - 26px - 72px);}div#note-card textarea#dms-quick-note {display: block;resize: none;flex: auto;border: 1px solid #AAAAAC;outline-color: #99999B;padding: 12px;font-size: 24px;font-family: "Microsoft YaHei";}div#note-card > div#button-area > button.note-card-button {flex: auto;margin: 10px auto 0;font-size: 24px;line-height: 48px;font-family: "Microsoft YaHei";}div#note-card > div#footer-tip {line-height: 48px;font-size: 14px;text-align: center;color: #99999C;}div#note-card > div#footer-tip > a {color: #E05749;text-decoration: none;}</style><div id="note-card"><div class="flex-area" id="text-area"><textarea id="dms-quick-note"></textarea></div><div class="flex-area" id="button-area"><button class="note-card-button" id="generate-note-card">Card</button><button class="note-card-button" id="generate-note-markdown">Markdown</button><button class="note-card-button" id="close">Close</button></div><div id="footer-tip">网页笔记卡片生成器 `+o+' <a href="'+r+'" target="_blank">'+r+`</a></div></div>`,document.querySelector("html").appendChild(t),f.querySelector("button#generate-note-card").addEventListener("click",e),f.querySelector("button#generate-note-markdown").addEventListener("click",a),f.querySelector("button#close").addEventListener("click",i)}();

油猴脚本:

新增了油猴子的实现方式,因为可以方便的引入第三方库,从而实现了对网址的二维码转化。这样虽然是图片,但是可以通过识别二维码的方式快速的跳转到分享的网址了。

脚本依然是付费的,购买地址https://r.izyx.xyz/#note_card

更新日志:

2021-10-16

  • 使用 Shadow DOM 隔离样式。
  • Added a few bugs (but the author doesn’t know where they are

2021-10-03

  • 关闭按钮
  • 复制 Markdown 代码
  • 代码整理

价格:

这个小书签是收费的,价格是 6.66 元起步,上不封顶。

允许短时间的免费试用,长时间使用还不付费就是盗版,当然我也打不着你……

付费方式:

自助扫码付费

AliPay-240 WePay-240 QQPay-240

售后:

有问题可以回复本帖,但不做任何承诺。

2 Likes