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个方案,最后确定使用 ...
随机推荐
- sql输出表中重复数据
数据: 1 1 2 32 2 2 33 1 2 34 2 2 35 2 1 36 1 1 37 3 2 1 表格查询: SELECT * FROM `t1`; 可以看到,如果界定为 a.b.c 都相同 ...
- 动态初始化swiper时,轮播图划不动得各种bug解决方法
var mybanner = new Swiper('.i-gd-banner', { speed: 500, loop: true, observer:true,//修改swiper自己或子元素时, ...
- mariadb数据库(2)增删改与 单表查询
一.数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行, 尽量使用范围小的,而不用大的 常用的数据类型 整数:int, bit 小数:decimal ...
- visual studio 2019 中初始化 vue.js 项目
vs项目模板,webpack模板的创建方式在vs里创建后,npm install的过程会卡很久,暂时原因不明,感觉应该是文件太多,需要写入太多零碎文件. 试了几种初始化方法,还是用最新cli创建最好, ...
- ACO 蚁群算法(算法流程,TSP例子解析)
算法 计算机 超级计算 高性能 科学探索 1. 算法背景——蚁群的自组织行为特征 高度结构化的组织——虽然蚂蚁的个体行为极其简单,但由个体组成的蚁群却构成高度结构化的社会组织,蚂蚁社会的成员有分工,有 ...
- C基础知识(2):变量&常量的定义和声明
变量定义和声明 (1) 使用int,char等类型符定义变量 使用int,char等类型符定义变量时,不管有没有指定初始值,都就已经建立了存储空间(开辟内存).内存寻址由大到小,优先分配内存地址比较大 ...
- shaderToy学习篇
觉得shadertoy上的一些网友的作品写得很好,加上自己对glsl一些内置函数,内置变量不是很熟悉,于是决定开始学习一下上面一些大佬的代码. 今天的案例是这个: 附上shaderToy的地址:htt ...
- jvm的学习笔记:二、类的初始化,代码实战(1)
对于静态字段来说,直接定义该字段的类才会被初始化 System.out.println(MyChild1.str); 输出: myParent1 static block hello myParent ...
- 【Python开发】urllib2异常处理
一.urllib2模块回顾 urllib2模块中最重要的函数是urlopen()函数,用于获取URLs资源(Uniform Resorce Locators).urlopen函数不仅可以用于简单的情况 ...
- java内存模型的实现
前几天,发了一篇文章,介绍了一下JVM内存结构.Java内存模型以及Java对象模型之间的区别.其中,Java内存模型,是这三个知识点当中最晦涩难懂的一个,而且涉及到很多背景知识和相关知识. 网上有很 ...