canvas 实现图片局部模糊_小技巧!H5使用Html2Canvas实现自动截屏(下)
document.getElementById('helpPage').style.display= 'none';//设置隐藏document.getElementById('helpPage').remove();//删除元素
二、设置服务中间件参数限制,以tomcat为例。
tomcat7.0.63之前的版本maxPostSize 设置为 0 或者负数Connector 节点中加入maxPostSize="0" 或者 maxPostSize="-1" tomcat7.0.63之后的版本,需要设置为负数Connector 节点中加入 maxPostSize="-1"
在tomcat文件夹下的conf文件中的server.xml 配置中添加:
maxPostSize="-1" //-1 表示不限制大小
maxPostSize:指定POST方式请求的最大量,没有指定默认为2097152。
三、前端序列化成file,使用文件上传的方式提交后台。前台基本代码如下:
function saveAsImageData(){ var userTemplateId = parent.window.templateId; var pic,dataUrl ; var canvas2 = document.createElement("canvas"); //创建一个新的canvas let _canvas = document.querySelector('#main'); //这里面填写 你需要截图的div var w = parseInt(window.getComputedStyle(_canvas).width); var h = parseInt(window.getComputedStyle(_canvas).height); canvas2.width = w; canvas2.height = h; //将canvas画布放大2倍或者更多,然后盛放在较小的容器内,就显得不模糊了 canvas2.style.width = w + "px"; canvas2.style.height = h + "px"; var context = canvas2.getContext("2d"); context.scale(1, 1); //指图片偏移 html2canvas(document.querySelector('#main'), { //写需要截图的div taintTest: false,useCORS: true,allowTaint: false, //这三串代码解决跨域问题 canvas: canvas2 }).then( function (canvas) { dataUrl = canvas.toDataURL("image/png"); var arr = dataUrl.split(',') var mime = arr[0].match(/:(.*?);/)[1] var suffix = mime.split('/')[1] var bstr = atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } var file = new File([u8arr], `temp_img.${suffix}`, {type: mime}); var formdata = new FormData(); formdata.append("file",file) $.ajax({ url: url,//路径 type: "POST", data: formdata, contentType: false, multiple: true, processData: false, success: function (data) { }, error: function (error) { } }); });}
后台代码如下:
@RequestMapping("fileUpload2") public String fileUpload2(@RequestParam("file") CommonsMultipartFile file) throws IOException { long startTime=System.currentTimeMillis(); System.out.println("fileName:"+file.getOriginalFilename()); String path="E:/"+new Date().getTime()+file.getOriginalFilename(); File newFile=new File(path); file.transferTo(newFile); return "/success"; }
本文阐述了在使用html2Canvas时,遇到序列化字符太大无法完成提交的问题的解决方案。分析了各个方案的适用场景和具体实现思路。当然可能还有更好的实现方式,欢迎交流讨论。
canvas 实现图片局部模糊_小技巧!H5使用Html2Canvas实现自动截屏(下)相关推荐
- Android开发小技巧 | 一句命令搞定截屏
-- 简书作者 谢恩铭 转载请注明出处 一句命令搞定截屏 在安卓开发中, 我们很多时候都要用到截屏这个功能. 有时是为了演示, 有时是为了报告问题(比如在Bugzilla, Jira, Redmine ...
- Android 开发小技巧 | 一句命令搞定截屏
-- 作者 谢恩铭 转载请注明出处 一句命令搞定截屏 在安卓开发中, 我们很多时候都要用到截屏这个功能. 有时是为了演示, 有时是为了报告问题(比如在Bugzilla, Jira, Redmine等B ...
- canvas 实现图片局部模糊_JavaScript中的图片处理与合成(四)
引言: 本系列现在构思成以下4个部分: 基础类型图片处理技术之缩放.裁剪与旋转(传送门): 基础类型图片处理技术之图片合成(传送门): 基础类型图片处理技术之文字合成(传送门): 算法类型图片处理技术 ...
- canvas 实现图片局部模糊_Canvas 在高清屏下绘制图片变模糊的解决方法
前提条件 假设我们要在 canvas 中绘制一张 300 x 90 的图片,并且要保证它在高清屏中不模糊.那么我们首先要准备一张 600 x 180的图片,处理过高清屏的同学应该会有这方面的经验. 问 ...
- canvas 实现图片局部模糊_HTML5 Canvas图片马赛克模糊动画
本文作者html5tricks,转载请注明出处 经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用 HTML代码如下 Change pixel resolution 32 定义了一 ...
- word小技巧--word插入标题之后自动跳到下一页怎么解决?
word插入标题之后自动跳到下一页怎么解决? 估计是这个标题样式的段落格式中,有段前分页的设定. 右键点击插入标题的样式,左键点击[修改] 会弹出一下修改样式对话框,点击左下角[格式]按钮 点击弹出的 ...
- canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js
Canvas实现毛玻璃效果解决方式1:使用stackblur.js 在Android系统中实现图片的毛玻璃效果比较好用的类库是:Android StackBlur 简单API说明: API 调用 下面 ...
- 【Excel】偷懒小技巧3:金额小写自动转换为大写
1 背景 看造价文件,突然发现了这么个东东. 点击进去一看,果然是编辑好公式可以自动生成那种.发现了新东东,大喜过望,原来还可以这样. 仔细看了下公式,嵌套又嵌套,好像有点明白,又好像晕乎乎.还是自己 ...
- iOS开发学无止境 - 6个iOS图片文本设计的小技巧
英文:TOPE 作者:星夜暮晨 网址:http://www.jianshu.com/p/88263196fdf0 设计师们似乎拥有着我们这些开发者所没有的"魔力",他们知道如何让一 ...
最新文章
- 杂谈 | 当前知识蒸馏与迁移学习有哪些可用的开源工具?
- oracle中set怎么用,sqlplus命令格式以及sqlplus中set的用法与解释-Oracle
- ip的正则表达式 java,项目实战:Java正则表达式验证IP地址
- 珠海市建设工程质量监督检测站
- Delphi编程注意事项
- c语言程序设计实验报告2,C语言程序设计实验报告2.docx
- 什么是跨域?跨域如何解决
- linux msgctl函数,msgctl()函数
- 魅族16T刚发布就被锤!德国莱茵TÜV:它没通过我的认证
- html脚本类型,HTML脚本标记:类型或语言(或省略两者)?
- 如何用计算机算十进制,计算器怎么,计算机是怎么转换二进制为十进制的
- vue做混合式app_基于vue2.0开发混合app的思考
- 贪心科技机器学习训练营(八)
- 采用commons-emai发送电子邮件
- 衣带渐宽终不悔,为“指针”消得人憔悴(四)
- Spring boot(四):整合Mybatis
- matlab 条件方程组的解,solve 时解方程组的限制条件问题
- This may cause NPE so Data Binding will safely unbox it.
- 人人商城,资金转账功能开发,让余额可以在会员中心自由流通
- C++多线程启动、暂停、继续与停止
热门文章
- 机器学习非监督学习—k-means及案例分析
- 查php源码授权后门,PHP授权系统+支持盗版入库+一键黑页后门注入+卡密授权
- (二十五)【NIPS 2017】Prototypical Networks for Few-shot Learning
- 【安利向】入坑半年的GPU云平台,三分钟训练起飞!xiu~
- LruCache在美团DSP系统中的应用演进
- 开源开放 | 熵简科技 AI Lab 开源金融领域中文预训练语言模型 FinBERT
- 金融行业如何用大数据构建精准用户画像?
- 工程实践:基于规则模式的军事和医药领域知识图谱问答快速实现
- 【Java】列表、集合、哈希表和可变参数
- 设计模式(九)——适配器模式