html2canvas+Canvas2Image分享海报功能踩坑
首先需要
getBase64Image(data) {
let that = this;
var canvas = document.createElement("canvas");
canvas.width = $(data.dom).width();
canvas.height = $(data.dom).height();
var ctx = canvas.getContext("2d");
ctx.drawImage(data.img, 0, 0, $(data.dom).width(), $(data.dom).height());
let newImg = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
if(data.type == 1){
that[data.dataName] = newImg.src;
}else if(data.type == 2){
that[data.dataDom][data.num].isbase = 1;
that[data.dataDom][data.num].img = newImg.src;
}
},
toImg(data) {
var that = this;
var img = new Image();
img.crossOrigin = '*';
img.src = data.src + '?v=' + Math.random();
img.onload = function () {
if(data.type == 1){
that.getBase64Image({img:img, dom:data.dom, dataName:data.dataName,type: data.type});
}else{
that.getBase64Image({img:img, dom:data.dom, dataDom:data.dataDom, num: data.num,type: data.type});
} }
},
generateItem(){
let that = this;
let node = document.querySelector('.card');
let w = node.offsetWidth;
let h = node.offsetHeight;
let canvas = document.createElement('canvas');
let scale = 3;
canvas.width = w * scale;
canvas.height = h * scale;
let opts = {
scale: scale,
canvas: canvas,
width: w,
height: h,
};
html2canvas(node, opts).then(function (canvas) {
var context = canvas.getContext('2d');
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
$(img).css({
'width': canvas.width / scale + 'px',
'height': canvas.height / scale + 'px',
});
that.posterImg = img.src;
that.type = 2;
});
},
html2canvas把dom元素改处理成图片
Canvas2Image.convertToImage把canvas变成图片
需要注意:
1.html2canvas对于跨域的处理,跨域图片需要特殊处理的不然处理出来的会变成空的图片,笔者用的是把服务器返回的图片给改变成base64图片的方法跳过了跨域问题
当然html2canvas是可以使用用跨域的useCORS: true
,这个也需要后端服务器的配合的。
参考https://www.cnblogs.com/padding1015/p/8947098.html
2.使用canvas处理图片成base64需要一定的时间,如果是马上执行的代码插入canvas那么canvas回是个空白的,类似vue的mounted中直接调用都是白的需要定时器帮助如下:
setTimeout(function(){
that.toImg({src:that.myPoster,dom:'.code-img',dataName:'myPoster',type: 1})
},100)
另外不要获取当前dom里的元素生成页面再插入替换当前dom同样需要时间,你回发现定时器后能成功返回生成的图片
html2canvas+Canvas2Image分享海报功能踩坑的更多相关文章
- html2canvas以及domtoimage的使用踩坑总结
前言 首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只对这个问题有一丝丝的印象,还需要从新去查找,于是,我注 ...
- html2canvas以及domtoimage的使用踩坑总结 动态获取的二维码失效如何生成海报
//判断手机为安卓还是ios 安卓html2canvas方法 ios系统dom-to-image方法 $(".code").click(function() { var u = n ...
- Flask框架踩坑之ajax跨域请求
业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应 ...
- MQ异步同步搜索引擎ElasticSearch数据踩坑
业务背景 在大型网站中,为了减少DB压力.让数据更精准.速度更快,将读拆分出来采用搜索引擎来为DB分担读的压力,ElasticSearch就是目前市面上比较流行的搜索引擎,他的检索速度奇快.支持各种复 ...
- html2canvas截屏在H5微信移动端踩坑,ios和安卓均可显示
1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...
- html2canvas的踩坑之路
html2canvas的踩坑之路 前言 早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品 ...
- System.Net邮件发送功能踩过的坑
System.Net邮件发送功能踩过的坑 目录 System.Net邮件发送功能踩过的坑 1.EazyEmail邮件发送类库 2.邮件发送授权码与邮件密码 3.通过邮件密码来发送邮件 4.Wiresh ...
- html2canvas在Vue项目踩坑-生成图片偏移不完整
背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
- web前端生成图片之探索踩坑
前段时间,产品和运营整了个非常变态的需求,要求将一个活动页面输出为图片,然后用户进行分享 开始以为是用户自己手动截图分享,没想到后来不是,细思极恐,感叹需求之变态. 从网上找了N个方案,最后确定使用 ...
随机推荐
- Mac os文件名大小写不敏感
Mac os文件名大小写不敏感,但是linux是大小写敏感的. 让我们代入一个场景, 创建一个新文件,你习惯以小写字母开头,接着在其他module中import,看起来一切都正常,emmm,确实没有任 ...
- idea启动报Plugin Error错误的解决办法(亲测有效)
今天在idea工作时,idea崩溃自动关闭,再打开时报Plugin Error,tomcat无法启动,于是上网查询,看到这个办法,成功解决了我的问题: 找到IDEA的配置文件夹下的disabled_p ...
- 私有npm计划
为什么要建立私有npm 提高代码复用程度,增加团队沉淀 剥离项目依赖,工程更加轻量 引用全量更新,支持版本降级 建立模块文档,降低上手难度 全员把关代码质量,无需重复测试 构建工具已成趋势,优化发布流 ...
- LC 954. Array of Doubled Pairs
Given an array of integers A with even length, return true if and only if it is possible to reorder ...
- java回调函数详解
声明:博客参考于https://www.cnblogs.com/yangmin86/p/7090882.html,谢谢哥们 回调函数:是指在A类执行代码时,调用了B类中的方法,但B类中的方法执行了A类 ...
- JS进阶学习<一>
一:区分大小写: 1. JS是区分大小写的,如:classname和ClassName是不一样的.同时注意方法.属性.变量等的大小写吆. 2. JS中的字符.符号等一定要在英文状态下输入吆. 二:变量 ...
- Ansible 直接请求远程主机执行命令
ansible -all -i host1.abc.com, -m ping #注意主机名称后面的逗号,就算一台主机也是必须的.多台主机可以用逗号隔开 ansible all -i host1.abc ...
- WPF 非UI线程更新UI界面的各种方法小结
转载:https://www.cnblogs.com/bdbw2012/articles/3777594.html 我们知道只有UI线程才能更新UI界面,其他线程访问UI控件被认为是非法的.但是我们在 ...
- CTF—攻防练习之HTTP—目录遍历
主机:192.168.32.152 靶机:192.168.32.163 目录遍历攻击又称(目录爬升,目录回溯,点-点斜线),指再访问存储在web根文件之夹外的文件和目录,通过操控带有"点-斜 ...
- CentOS7中yum配置
1.打开centos的yum文件夹 输入命令cd /etc/yum.repos.d/ 2.用wget下载repo文件 输入命令wget http://mirrors.aliyun.com/repo ...