html2canvas源码修改,html2canvas把div保存高清图的方法代码
http://www.bootcdn.cn/(可以搜索html2canvans)
1.选择html2canvas版本(这个版本可以放大倍数保证图片清晰)
默认生成的canvas图片在retina设备上显示很模糊,处理成2倍图能解决这个问题:
varw=$("#code").width();
varh=$("#code").height();
//要将canvas的宽高设置成容器宽高的2倍
varcanvas=document.createElement("canvas");
canvas.width=w*2;
canvas.height=h*2;
canvas.style.width=w+"px";
canvas.style.height=h+"px";
varcontext=canvas.getContext("2d");
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(2,2);
html2canvas(document.querySelector("#code"),{
canvas:canvas,
onrendered:function(canvas){
...
}
});
下载方法:
.on('click','.download',function(){
$('#mycanvas').remove();
var_height=$('.skinReport').height();
//滚到顶部
$('html,body').animate({scrollTop:0});
if(confirm('是否下载肌肤检测报告?'))
{
setTimeout(function(){
varcanvas=document.createElement("canvas"),
w=$('#skinReport').width(),
h=$('#skinReport').height();
canvas.width=w*2;
canvas.height=h*2;
canvas.style.width=w+"px";
canvas.style.height=h+"px";
varcontext=canvas.getContext("2d");
//然后将画布缩放,将图像放大两倍画到画布上
context.scale(2,2);
html2canvas(document.getElementById('skinReport'),{
allowTaint:false,
taintTest:true,
canvas:canvas,
onrendered:function(canvas){
canvas.id="mycanvas";
canvas.style.display='none';
document.body.appendChild(canvas);
//生成base64图片数据
imgData=canvas.toDataURL(type);
//varnewImg=document.createElement("img");
//newImg.src=dataUrl;
//document.body.appendChild(newImg);
//console.log(imgData);
var_fixType=function(type){
type=type.toLowerCase().replace(/jpg/i,'jpeg');
varr=type.match(/png|jpeg|bmp|gif/)[0];
return'image/'+r;
};
//加工imagedata,替换mimetype
imgData=imgData.replace(_fixType(type),'image/octet-stream');
/**
*在本地进行文件保存
*@param{String}data要保存到本地的图片数据
*@param{String}filename文件名
*/
varsaveFile=function(data,filename){
varsave_link=document.createElementNS('http://www.w3.org/1999/xhtml','a');
save_link.href=data;
save_link.download=filename;
varevent=document.createEvent('MouseEvents');
event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
save_link.dispatchEvent(event);
};
//下载后的问题名
varfilename=aname+'肌肤检测报告'+(newDate()).getTime()+'.'+type;
//download
saveFile(imgData,filename);
},
width:1512,
height:15000
})
},2500)
}
else
{
return;
}
})
本文转载自中文网
html2canvas源码修改,html2canvas把div保存高清图的方法代码相关推荐
- 短视频源码如何快速打造一款高清又极速的短视频APP?...
整个短视频的市场规模一直在增长,网络数据显示2018年已经突破100亿大关,在2019年预测将超过200亿.纵观行业,在生活资讯.美食.搞笑.游戏.美妆等领域,短视频流量巨大但竞争激烈,但是在教育.财 ...
- Ureport2源码修改:增加自定义功能
Ureport2源码修改:单元格超链接增加弹出窗口显示功能 需求来源 功能实现 ureport2-js项目: ureport2-console项目: ureport2-core项目: 最终效果 新人第 ...
- Android6.0 源码修改之 仿IOS添加全屏可拖拽浮窗返回按钮...
Android6.0 源码修改之 仿IOS添加全屏可拖拽浮窗返回按钮 前言 之前写过屏蔽系统导航栏功能的文章,具体可看Android6.0 源码修改之屏蔽导航栏虚拟按键(Home和RecentAPP) ...
- 百度编辑器UEditor源码模式下过滤div/style等html标签
2019独角兽企业重金招聘Python工程师标准>>> UEditor在html代码模式下,当输入带有<div style="">.<ifram ...
- grbl控制3轴机械臂 原理 实现 (四) 之GRBL源码修改驱动三轴机械臂
往期回顾: 第一篇:grbl控制3轴机械臂 原理 实现 (一) 之2D机械臂模拟及实现 第二篇:grbl控制3轴机械臂 原理 实现 (二) 之3D机械臂模拟及实现 第三篇:grbl控制3轴机械臂 原理 ...
- Android6.0 源码修改之Settings音量调节界面增加通话音量调节
Android6.0 源码修改之Settings音量调节界面增加通话音量调节 前言 今天客户提了个需求,因为我们的设备在正常情况下无法调节通话音量,只有在打电话过程中,按物理音量加减键才能出现调节通话 ...
- chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值 ,chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
- nacos源码修改编译(亲测)
nacos源码修改编译 文章目录 nacos源码修改编译 内容概述 源码修改 源码编译 测试 内容概述 生产项目选型时选择nacos作为项目的注册中心,但是由于内网安全要求,用户名和密码必须加密传输, ...
- IDA简单使用及源码修改教程
简单使用 待记录... 修改源码 修改字符串 题目链接 要修改的函数如下 void read_flag() {int fd; // [esp+1Ch] [ebp-Ch] fd = open(&quo ...
最新文章
- 4键电子手表说明书_电子手表怎么调(电子手表的四个键的功能各是什么)
- Linux下安装MongoDB单节点
- DP(01背包) UESTC 1218 Pick The Sticks (15CCPC C)
- iOS开发学习-nonatomic和atomic的区别
- 百度面试 php后端,2019.7最惨的三次面试经历-----百度PHP实习生面经
- 物联网与人工智能之间的区别与联系
- centos8共享文件夹挂载_linux挂载群辉的NFS共享文件夹
- 11.ar, nm, objdump
- Perhaps you should add the directory containing libpcre.pc to the PKG_CONFIG_PATH
- 2022年6月深圳地区数据分析师认证(CPDA),进入了解
- 开源文档管理系统mysql_14款开源文档管理系统
- 为孩子进行启蒙教育的6种基本思维导图类型分析
- html计时加速,HTML-加速、再加速(下)_html
- 【小麦苗课堂】高可用培训(RAC+DG+OGG)--包括11g、12c、18c、19c等版本
- HCIA网络基础01
- 浙江大学 PTA 递归实现顺序输出整数
- python编写程序输出诗句_闲来无事能干嘛 用Python来玩诗歌接龙
- 核心期刊《中国兽医学报》
- vue3学习之旅--邂逅vue3-了解认识Vue3(二)
- 腾讯云服务器入门使用-docker安装
热门文章
- 微信人人商城云服务器,微信支付配置
- 启明云端用一张表格带你了解sigmastar SSD20x系列的区别!帮助你快速完成选型!
- php两段音频合成一个,两段音乐合并 如何将两段音乐合并成一个音乐文件
- vue点击按钮切换显示不同内容_邂逅Vue
- Angularjs(一)
- layui的表格可以动态添加行吗_答疑分享052:插入表格,数据分析更方便
- python androidhelper kivy_顶SLA4、QPython学习笔记
- sqlserver 安装共享功能什么意思_手表上的小表盘,大表盘是什么意思?它们可以带来哪些好玩的功能...
- git之一: 在windows下安装git和使用总结
- Nginx虚拟主机配置