PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
新春佳节，祝大家虎年大吉大利，都能抢到回家的火车票
素材准备
高铁票背景图
界面实现
根据需求，我们需要将文字定位到图片的指定位置上，我们很自然的就会想到使用 absolute 来进行定位，但如果我们不指定其父元素的 relative 定位，那么 absolute 元素中的 top 、 left 等属性将相对于 body 来进行定位，这样在不同的分辨率情况下定位将会错乱。如下图：
随机趣味信息
车次和价格的信息是预先定义在数组里的，每次输入信息后，都会随机取出一个展示到页面上，而这时我们就需要一个随机函数来生成所需的数组下标。代码如下：
getRandomInt: function(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
代码解释
Math.ceil()函数返回大于或等于一个给定数字的最小整数Math.floor()返回小于或等于一个给定数字的最大整数Math.random()函数返回一个浮点数, 伪随机数在范围[0，1)- 首先对输入参数进行处理，最小数保证为大于或等于自身的整数，最大数保证为小于或等于自身的整数。
Math.random() * (max - min)保证生成[0, (max - min))区间的随机数，再用Math.floor()来返回一个小于或等于自身的最大整数，这样就生成了[0, (max - min))的随机整数，最后再加上最小数，就可以保证生成[min, max)的随机整数
保存为图片
最后，我们需要将生成的效果保存为图片，这里我用到的插件是 html2canvas，这个插件使用起来也很简单，代码如下：
handleExportData: function() {
html2canvas(document.querySelector('.show-info'), {
scale: 2, //放大一倍，使图像清晰一点
useCORS: true, //（图片跨域相关）
allowTaint: false, //允许跨域（图片跨域相关）
onrendered: function(canvas){
const exportImgLinkEle = document.querySelector('#exportImgLink');
exportImgLinkEle.href = canvas.toDataURL('image/png');
exportImgLinkEle.click(); // 执行 <a> 元素的下载
}
})
}
注意
- 对应节点引入的图片必须是
http链接的形式，如果是相对路径图片将不展示 - 必须添加跨域配置
useCORS: true、allowTaint: false，否则图片也不会展示
