UP | HOME

🔙回到目录 | 🔻 本网页更新于 [2026-08-02 日 20:39]

将网页选中文本生成为图片


当你在浏览一些文本网站的时候,总是想分享一下相关内容给其他人。但是直接复制文本会有一些问题。有的时候网站不一定乐意让你复制,有的时候网站会往复制到的文本里掺自己的推广链接,还有的时候文本太多复制出来一大片,不适合在社交软件上发送。

因此,我们有下面这片代码,可以将选中区域文本生成一张图片,然后用网页的标题和链接作为标题与次级链接:

javascript:(function(){var sel=window.getSelection().toString().trim().replace(/[\r\n]+/g,'\n');var url=window.location.href;var title=document.title.replace(/^\([^)]*\)\s*/,'');if(!title.trim()&&!url.trim()&&!sel.trim()){alert('没有内容可生成图片');return}var W=680,pad=40,fontSize=20,lineH=1.5;var titleLineHeight=fontSize*1.7;var normalLineHeight=fontSize*lineH;var maxTextW=W-pad*2;var baseFont=fontSize+'px "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif';var boldFont='bold '+baseFont;var canvas=document.createElement('canvas');var ctx=canvas.getContext('2d');function wrapText(text,maxW,measureFont){ctx.font=measureFont;var lines=[];var paragraphs=text.split('\n');for(var i=0;i<paragraphs.length;i++){var p=paragraphs[i];if(p===''){lines.push('');continue}var chars=Array.from(p);var cur='';for(var j=0;j<chars.length;j++){var test=cur+chars[j];if(ctx.measureText(test).width>maxW&&cur!==''){lines.push(cur);cur=chars[j]}else{cur=test}}if(cur!=='')lines.push(cur)}return lines}var allLines=[];var titleLines=wrapText(title,maxTextW,boldFont).map(function(l){return{text:l,type:'title'}});var urlLines=wrapText(url,maxTextW,baseFont).map(function(l){return{text:l,type:'url'}});var selLines=sel?wrapText(sel,maxTextW,baseFont).map(function(l){return{text:l,type:'text'}}):[];allLines=titleLines.concat(urlLines,selLines);var totalH=pad*2;for(var i=0;i<allLines.length;i++){totalH+=(allLines[i].type==='title')?titleLineHeight:normalLineHeight}canvas.width=W;canvas.height=Math.max(totalH,200);var grad=ctx.createLinearGradient(0,0,0,canvas.height);grad.addColorStop(0,'#ffffff');grad.addColorStop(1,'#f1f3f5');ctx.fillStyle=grad;var r=16,x=0,y=0,w=W,h=canvas.height;ctx.beginPath();ctx.moveTo(x+r,y);ctx.lineTo(x+w-r,y);ctx.quadraticCurveTo(x+w,y,x+w,y+r);ctx.lineTo(x+w,y+h-r);ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);ctx.lineTo(x+r,y+h);ctx.quadraticCurveTo(x,y+h,x,y+h-r);ctx.lineTo(x,y+r);ctx.quadraticCurveTo(x,y,x+r,y);ctx.closePath();ctx.fill();var yPos=pad;for(var k=0;k<allLines.length;k++){var line=allLines[k].text;var type=allLines[k].type;if(type==='title'){ctx.font=boldFont;ctx.fillStyle='#212529';ctx.fillText(line,pad,yPos);yPos+=titleLineHeight}else if(type==='url'){ctx.font=baseFont;ctx.fillStyle='#0d6efd';ctx.fillText(line,pad,yPos);yPos+=normalLineHeight}else{ctx.font=baseFont;ctx.fillStyle='#343a40';ctx.fillText(line,pad,yPos);yPos+=normalLineHeight}}canvas.toBlob(function(blob){if(!blob){alert('生成图片失败');return}navigator.clipboard.write([new ClipboardItem({'image/png':blob})]).then(function(){}).catch(function(err){alert('❌ 复制失败:'+err.message+'\n请确保页面为 HTTPS,并允许剪贴板权限。')})},'image/png')})();

把上面的内容复制,在标签栏上新建一个标签,在 URL 一行中粘贴复制的内容,然后保存就行。

这样一来,当你想分享一些内容,仅需选中文本—点击上面新建的标签,就会将文本生成图片保存在剪切板中,可以直接在社交软件里粘贴。

© Published by Emacs 32.0.50 (Org mode 10.0-pre) | RSS 评论