引言

年后一直处于秣马厉兵的状态,上周接到了一个紧急需求,为38妇女节做一个活动页,主要功能是生成海报,第一次做这种需求,我也是个半桶水前端,这里将碰到的问题、踩的坑,如何解决的分享给大家,讲的不到位的地方还望斧正。

效果展示

目前活动还是在线状态,这里是最后生成海报的效果,扫描二维码就可以进入页面。

实现方案

起初实现的方案是展示的时候直接使用canvas,计算手机屏幕大小,让canvas充满整个屏幕,用户编辑完之后直接用展示的canvas生成图片,最后发现这种形式很麻烦,碰到适配问题,canvas计算起来比较麻烦。

最终方案,展示的时候使用html、css,这样用户看到的展示、编辑页面适配起来容易。最后生成图片的时候使用canvas,这个canvas是隐藏的,用户不可见,这样还有一个优点,最终生成的海报大小是固定的,跟手机屏幕大小无关。

方案看着很简单,实现的时候各种细节问题。

资源预加载

H5海报活动,就像一个小型的APP,体验一定要好,最主要的就是资源预加载了,整个应用大小有30个图片,还有字体文件,一个字体文件就有3MB多,如何做好资源预加载很大程度上影响了这次活动的体验。

图片预加载

图片预加载的原理就是使用http协议中的缓存,这里主要指的是强缓存(协商缓存还要去服务器,有网络交互)。在活动首页之前加个loading页面,将所有用到的图片加载一遍,等到后面加载的时候就只有几ms。

图片预加载,使用let image = new Image()创建一个图片标签,在image.src中加入图片链接,加载成功调用image.onload事件。一张图片还好,大量图片的话如何优雅的做出进度条呢?

还好有Promise这个银弹,我们可以轻松的实现进度条效果。

class Preloadedr {
/**
*
* @param images array 要加载的图片,数组
* @param processCb function 回调函数,加载中进度有变化就调用
* @param completeCb function 回调函数,加载完成调用
*/
constructor(images, processCb, completeCb) {
this.imagesElement = []
this.loaded = 0
this.images = images
this.total = images.length
this.processCb = processCb
this.completeCb = completeCb
} /**
* 开始预加载缓存图片
*
* @returns {Promise<any[]>} Promise 包含所有图片的promise
*/
preloadImage() {
let me = this
let promises = []
me.loadedAction()
me.images.forEach((img) => {
let p = new Promise((resolve, reject) => {
let image = new Image()
image.src = img
this.imagesElement.push(image)
image.onload = () => {
me.loadedAction(img)
resolve(image)
}
image.onerror = () => {
resolve("error")
}
})
promises.push(p)
}) return Promise.all(promises)
} /**
* 进度变化的时候回调,private
*
* @param key string 加载成功的图片地址
*/
loadedAction(key) {
if (key) {
this.loaded++
}
this.processCb(this.total, this.loaded)
if (this.total == this.loaded) {
this.completeCb()
}
}
}

每个要加载的图片都是一个Promise,将所有图片Promise包装为一个大的Promise,当这个大的Promise状态为fulfilled的时候,表明图片加载完成。要注意,包装图片Promise的时候onerror也是返回成功,这是因为Promise.all会包装出一个新Promise,这个Promise只要出现一个失败,就直接返回报错了,所以失败了也返回成功(resolve),就算有少数图片未加载成功也影响不大。

用起来也很简单:

(async () => {
let imgLoader = new Preloadedr([
"//avatar-static.segmentfault.com/606/114/606114310-5c10a92c87f07_huge256",
"//image-static.segmentfault.com/203/994/2039943300-5c515b79c91f1_articlex",
], (total, loaded) => {
console.log("process: 图片" + Math.floor(100 * loaded / total) + "%")
}, () => {
console.log("complete: 图片" + 100 + "%")
})
await imgLoader.preloadImage()
console.log("加载完成")
})()

可以看到输出如下:

process: 图片0%
Promise {<pending>}
process: 图片50%
process: 图片100%
complete: 图片100%
加载完成

至此,图片预加载就实现了。接下来我们看看字体的预加载,字体也是一种http静态资源,也可以使用缓存,但在实现预加载上却远没有图片这么简单。

字体预加载

字体预加载,没有像Image那么方便的函数回调使用,查了下资料,有个document.fonts实验性的属性,试了下基本支持,但在ios上可能会出现一点儿小问题,加载过一次有缓存了,第二次加载时候onloadingdone事件可能不会触发,另外这个属性、事件还是一个实验性的属性,浏览器支持程度未知,可能很差。

查了很多资料,无意中看到有人说webfontloader这个项目通过一种比较trick的方法实现了,原理就是下面这两句话:

不同字体,在将 fontSize 设置到很大的时候(比如300px),同一段文字,他展示的宽度是不一样的。

给两个div,同样的文字内容,第一段设置两种字体,待加载字体首选,默认字体备选,第二种只设置默认字体,定时器去扫描,当两段文字长度不同的时候就说明新字体加载成功可使用。

大概看了下webfontloader,代码写的比较凌乱,命名奇怪,注释少、没翻译(

H5海报制作实践的更多相关文章

  1. 【干货】微信场景之H5页面制作免费工具大集合

    营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用 ...

  2. 易企秀 we+ Maka 兔展 四大H5页面制作工具

    H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...

  3. 【转】视频H5 video最佳实践

    原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...

  4. 解决移动端H5海报滑动插件适应大部分手机问题 手机端高度自适应

    Html5微信端滑屏海报在各种尺寸的手机上总会有这样那样的问题,经过多次制作总结出来一些小心得,分享下. 我使用的是jquery插件swiper.min.js,动画可以利用animate.css,如果 ...

  5. h5快速制作工具-企业级. 非个人无水印

    Epub360 Epub是团队引入的专业级H5应用开发工具,能够快速制作出高质量的H5运营交互页面,具有动画控制.交互设定.社交应用和数据应用的特点,其制作过程就类似于制作一个PPT,比较容易上手. ...

  6. [转]15年双11手淘前端技术巡演 - H5性能最佳实践

    [原文地址]:https://github.com/amfe/article/issues/21 前言 2015年是全面『无线化』的一年,在BAT(财报)几家公司都已经超过50%的流量来自移动端,这次 ...

  7. weex h5开发区别-实践初级篇

    html标签 weex中没有标签的概念,html中标签对应于weex中的Components weex 无<span> .<p> ,用<text>替代.但是< ...

  8. C# Note19: Windows安装包制作实践

    前言 最近在项目中需要不断更新新版本的software installer(软件安装包),于是便查阅资料,整理了下制作方法. NSIS安装包制作脚本 NSIS(Nullsoft Scriptable ...

  9. UI设计教程分享:PS故障风海报制作教程

    1.首先找一张看起来很酷的图(也可以选择自己喜欢的图片):   2. 复制图层,点击添加图层样式,选择混合选项,在高级混合里面的通道选项,有R.G.B三个通道选项,默认是全部勾选的状态,选择其中一个勾 ...

随机推荐

  1. mac下编译node源码

    看过一篇win7 64x下面编译node的文章,链接地址:编译nodejs及其源码研究 下面学习一下在mac下面如何编译node源码. 过程也挺简单. 1.下载源码. > mkdir nodes ...

  2. float、double、BigDecimal的一些精度问题

    float f = 280.8f;System.out.println(f*100);结果是什么?结果是:28080.0f(我是这么想的)实际结果是:28079.998 既然float处理有问题换do ...

  3. Linux下图形数据库Neo4j单机安装

    Neo4j数据库简介 Neo4j 是一个NoSQL的图形数据库(Graph Database).Neo4j使用图(graph)相关的概念来描述数据模型,把数据保存为图中的节点以及节点之间的关系.很多应 ...

  4. Integert 与 int例子详解

    public final class Integerextends Numberimplements Comparable<Integer> Integer 类在对象中包装了一个基本类型 ...

  5. c/c++ 二叉排序树

    c/c++ 二叉排序树 概念: 左树的所有节点的值(包括子节点)必须小于中心节点,右树所有节点的值(包括子节点)必须大于中心节点. 不允许有值相同的节点. 二叉排序树的特点: 中序遍历后,就是从小到大 ...

  6. c复杂函数指针

    函数指针,函数的返回值是数组 int *(*(*fun)(int* a, int* b))[]; 上面的代码是声明一个函数指针,这个函数有2个int指针参数,返回值是指针,指向的是数组,数组里放的是i ...

  7. 下载Eclipse、下载Java各个版本,来这里就对了

    Eclipse官网:http://www.eclipse.org/ 不信你去看看 Java官网:https://www.java.com/ 不信你去看看 可惜是,每次进入官网提示都是下面这样的:来,我 ...

  8. 使用蒲公英路由器 X3 设置为网络中继器

    由于我的路由器放的时间比较久没有用了,所以先让路由器来个升级.链接图如下: 在浏览器地址栏中输入  oraybox.com,系统会自动跳到 https://pgybox.oray.com/passpo ...

  9. sqli-labs安装

      平台:Win7 SP1     需要准备的东西:   1. Sqli-labs ,下载地址: https://github.com/Audi-1/sqli-labs   2.phpstudy   ...

  10. layui 的 GitHub 及 Gitee (码云) 仓库

    GitHub: https://github.com/sentsin/layui/ Gitee:https://gitee.com/sentsin/layui