前端生成的海报

时间：2023-03-28 00:57:52 HTML

前端截图前端生成海报并将图片内容保存为div生成Bob|base64通过html2canvas截图并保存到本地（下载方式无法下载，长按生成图片保存到本地）style*{margin:0;填充：0；列表样式：无；}.view{宽度：375px；高度：667px；位置：相对；颜色：#FFFFFF；文本对齐：居中；字体大小：20px；背景：#409EFF；尺寸：30px；位置：绝对；顶部：50px；左：50%；转换：translateX(-50%)；}.content{宽度：100%；字体大小：16px；:50%;转换：translateX(-50%)；}.result{宽度：375px；高度：667px；}.result>img{宽度：100%；高度：100%；}.btn{填充：10px；按钮{内边距：6px10px；}html保存海报生成图像

海报标题

海报内容

js//functionsaveFile(){让dpi=window.devicePixelRatio||2letoptions={useCORS:true,ignoreElements:false,scale:dpi//设置默认值提高图像分辨率};html2canvas(document.querySelector("#capture"),options).then(canvas=>{//document.body.appendChild(canvas)canvas.toBlob(function(blob){downloadBob(blob);});});}functiondrawImage(){让dpi=window.devicePixelRatio||2letoptions={useCORS:true,ignoreElements:false,scale:dpi//设置默认值增加图像分辨率};html2canvas(document.querySelector("#capture"),options).then(canvas=>{leturl=canvas.toDataURL('image/png')//base64document.querySelector('#result').innerHTML=``});}//长按保存生成的不能下载的图片functiondownloadBob(blob){vara=document.createElement('a');varurl=window.URL.createObjectURL(blob);var文件名='海报.png';a.href=网址；a.download=文件名；a.点击();window.URL.revokeObjectURL(url);}

上一篇：SAP UI5 Responsive Grid Layout 里的 Label-Field Ratio 在屏幕类型 S 下的表现

下一篇：我对JeecgBoot的看法

前端生成的海报相关文章