首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端水印_前端代码review

    需求 给图片加上看不到的水印,当通过其他的方式可以清楚的看到图片中暗藏的水印,以此方式追溯到泄密的人 解决办法 利用canvas实现图片和水印的绘制,具体过程如下: 新建canvas,宽度和高度取要加水印的图片的宽度和高度...在该canvas上绘制要添加的水印文字,文字透明度设置要特别的低,但是当水印透明度小于等于0.003,不可恢复到水印。...if(matched && matched.length > 1){ // 获取该img的src let curSrc = matched[1] // 如果是.gif的图片则不加水印...(that.userInfo.fullName + that.userInfo.name) : '猿辅导水印' // 绘制的起点 let x = 20,y=20; /...在ps中经过图像的处理我们可以得到下图 可以看到隐藏的水印文字,由于我没有学过专业的图像处理技术,只能简单的看懂文字,并没有很清晰,具体如何很清晰的在不同的图像下看到暗藏的水印我觉得设计部的同事应该会很清楚

    87120

    前端纯js导入导出json配置文件

    在做后台系统需求的时候,有个需求是需要把当前表单配置导出,在另一个配置项下,导入这些配置,相当于做了一下配置拷贝。通常我们导出下载一个文件,是先向后端发起请求,由后端处理数据后,再返回文件。...调研发现,纯前端也可以实现这样的效果,而且很简单,不需要后端做处理。前端在一次拿到数据后,就可以导出数据到文件。...导出json文件 创建一个a标签,通过a标签的download href属性,可以实现直接下载静态数据,代码如下: let link = document.createElement('a') link.download...= 'config.json' link.href = 'data:text/plain,' + JSON.stringify(data) link.click() 以上便是将json数据导出为json...文件的操作,希望对你有所帮助。

    2.1K21

    前端水印实现方案

    ,简单对比一下这两种方式的特点: 前端浏览器加水印: 减轻服务端的压力,快速反应 安全系数较低,对于掌握一定前端知识的人来说可以通过各种骚操作跳过水印获取到源文件 适用场景: 资源不跟某一个单独的用户绑定...,而是一份资源,多个用户查看,需要在每一个用户查看的时候添加用户特有的水印,多用于某些机密文档或者展示机密信息的页面,水印的目的在于文档外流的时候可以追究到责任人 后端服务器加水印: 当遇到大文件密集水印...,或是复杂水印,占用服务器内存、运算量,请求时间过长 安全性高,无法获取到加水印前的源文件 适用场景:资源为某个用户独有,一份原始资源只需要做一次处理,将其存储之后就无需再次处理,水印的目的在于标示资源的归属人...这里我们讨论前端浏览器环境添加 二、收益分析 简单介绍一下目前主流的前端水印的方法,以后其他同学在用到的时候可以作为参考。.../ 3.前端水印生成方案(网页水印+图片水印):https://juejin.cn/post/6844903645155164174

    2.3K20

    前端如何将json数据导出为excel文件

    前端人员在开发时,有时为了满足用户需求,需要下载excel文件。...这里通常有两种做法,一种是后端工程师将数据转化为excel,然后前端进行下载即可,还有一种方式,前端请求需要下载的数据,在浏览器端生成excel文件,然后进行下载。...今天就和大家聊一下第二种方式,如果用第二种方式的话,我们需要引入xlsx这个npm包,来看一下示例代码: //1、定义导出文件名称 var filename = "write.xlsx"; // 定义导出数据...XLSX.utils.book_append_sheet(wb, ws, ws_name); // 执行下载 XLSX.writeFile(wb, filename); 使用xlse导出文件时,json...ws, ws_name); XLSX.writeFile(wb, filename); } return } 以上便是在前端项目中导出

    7.2K50

    前端水印生成方案

    我们同样可以通过NodeJS来生成网页水印(出于性能考虑更好的方式是利用用户客户端来生成)。前端发一个请求,参数带上水印内容,后台返回图片内容。...如果只是简单的水印展示,建议在浏览器生成,性能更好 拓展 隐水印 前段时间阿里凭截图查到了月饼事件的泄密者,其实就是用了隐水印。这其实很大程度不是前端的范畴了,但是我们也应该了解。...,不过对于一些机密图片文件展示,是可以偷偷用上该技术的。...使用加密后的水印内容 前端生成的水印也可以,别人也可以用同样的方式生成,可能会有“嫁祸于人”(可能这是多虑的),我们还是要有更安全的解决方法。...参考链接 1.不能说的秘密——前端也能玩的图片隐写术 2.阮一峰-Mutation Observer API 3.lucifer-基于KM水印的图片网页水印实现方案 4.damon-网页水印水印前端SVG

    7.2K41

    基于前端JS导出Excel文件(减轻服务端压力)

    1.导出Excel,如果在Java后端的话,且导出的数据量比较大,且又处于高并发的情况,服务器内存会被瞬间占满(如果数据量较大,POI会有内存泄漏的风险),CPU占用率也会持续升高(Excel生成二进制文件...,是非常吃CPU性能的) 前端JavaScript导出Excel思路 ?...2.但是 如果把 生成Excel的工作交给前端浏览器去完成,后端这是做一个数据发包,而浏览器拿到数据后在自己本地客户端执行生成文件,占用的CPU资源也是客户端的,即使再大的数据也对服务端没有太大影响 三...以下简称XSU xlsxExport.utils.js XEU本项目核心文件,基于XS 与 XSU的方法二次封装,更好的控制导出excel的样式。...-- 导出文件--> <!

    14.9K23

    文件下载,excel导出

    实际开发中的文件下载和excel导出 在实际的开发过程中,我们经常会遇到这种需求,导出文件或者下载文件的时候,弹出保存弹框然后指定文件名或者路径然后再点保存的这种, 一般网上看到的excel文件到处,基本上看到的都是指定下载路径的...,这里我针对弹框这种方式做一个说明 前端代码 exportExcel(){ //获取弹框,并且弹出保存框 let iframe = document.getElementById('downloadIframe...ByteArrayOutputStream os = new ByteArrayOutputStream(); wb.write(os); os.flush(); String fileName ="项目信息导出...这里需要注意的事返回的数据类型是指定的 return new ResponseEntity(os.toByteArray(),httpHeaders,HttpStatus.OK); } 类似的,对于图片文件或者文本文件...,因为浏览器默认都是直接打开的,我们需要将文件进行字节话,然后按照指定的类型返回,亦可以对文件进行下载功能

    1.5K31
    领券