最近新做活动总结,好多坑!

作者: MJ 分类: javascript 发布时间: 2018-12-06 16:56

1:js动态截取某一部分html为图片

标题中的坑最主要就是集中在这一部分,最开始使用了html2canvas来处理这个问题,但是遇到的问题很多,比如截取的图片模糊、错位、数据空白,最主要的就是错位,由于需求的原因,每一次图片上的数据都是动态的,所以用了position定位和动态加载数据,这两个玩意是最主要的根源,大家在平时开发中尽量避免。

说回我们的需求,需要动态截取活动页面中的海报,然后把这张截图用微信等社会化分享的方式分享出去,由于html2canvas最终生成的图片是canvas,如果仅仅是直接展示图片那就好办了直接转成base64就行了,但是微信分享不支持这种格式,所以直接传递给后台,生成一张图片然后再返回来,最终效果还算是满意,但是也有小瑕疵,动态添加的数据稍有错位。

如果需求相对简单还是推荐使用:

rasterizeHTML.js

dom-to-image

核心代码:

    var shareContent = $("#poster")[0];// 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题
    var width = shareContent.offsetWidth * 1.4;  // 获取(原生)dom 宽度
    var height = shareContent.offsetHeight * 1.4 + 200; // 获取(原生)dom 高
    var offsetTop = shareContent.offsetTop;  //元素距离顶部的偏移量
    var canvas = document.createElement('canvas');  //创建canvas 对象
    var context = canvas.getContext('2d');
    var scaleBy = getPixelRatio(context);  //获取像素密度的方法 (也可以采用自定义缩放比例)
    canvas.width = width * scaleBy;   //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移
    canvas.height = (height + offsetTop) * scaleBy;  // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题
    context.scale(scaleBy, scaleBy);
	var opts = {
        allowTaint:true,//允许加载跨域的图片
        tainttest:true, //检测每张图片都已经加载完成
        scale:scaleBy, // 添加的scale 参数
        canvas:canvas, //自定义 canvas
        logging: false, //日志开关,发布的时候记得改成false
        width:width, //dom 原始宽度
        height:height //dom 原始高度
    };
	html2canvas(shareContent, opts).then(function (canvas) {
        var _src = canvas.toDataURL("image/jpeg",1);//转成base64格式
		console.log(_src);
    )}

参考文档:

http://html2canvas.hertzen.com/

https://segmentfault.com/a/1190000007707209

2:特殊数字转换成字体

需求发过来的活动上边有很多特殊字体,本以为就是某个字体,直接引入字体就行了,虽然引入字体造成了项目增加体积(一般字体都有十几M以上),但是询问之后是自己设计的字体,崩溃!!!然后就想到了直接用图片吧,0-9,深入了解之后发现字体各种倾斜、颜色,直接放弃了这种考虑。

那怎么办呢?直接上字体图标吧,周末直接把数字的设计图用AI重绘了一遍,然后在iconfont转换成了字体图标,完美解决各种倾斜、各种颜色的问题。实现就更简单了,如下:

// 专属数字处理
function showNumber(num){
	var number1 = [
		"icon-number0",
		"icon-number1",
		"icon-number2",
		"icon-number3",
		"icon-number4",
		"icon-number5",
		"icon-number6",
		"icon-number7",
		"icon-number8",
		"icon-number9"
	];
	var imgList = number1;
	var arrs = num.split('');
	var str = "";
	$.each(arrs,function(i,item){
		str+='<i class="number '+imgList[item]+'"></i>';
	});
	return str;
}

 

3:弹窗更简单的禁止穿透实现

之前的解决办法用了https://www.love85g.com/?p=1458

最近又发现了一个更简单的解决办法:在body动态切换class:touch-stop即可,代码最少,兼容也挺好的。

.touch-stop{
    position: fixed;
    overflow: scroll;
    -webkit-overflow-scrolling:touch;
}

 

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注