需求：
将课程宣传图、课程信息（标题、价格、链接二维码）及用户信息（用户名和头像）合成海报。最终效果如图所示
最终合成图
步骤分析：
-
从后台获取课程信息，用户信息。
-
图片大小设定为宽750px（同设计稿大小），高度根据内容变化。在html转画布时，按1：1合成图片，在移动端的展示效果较为清晰。
-
将宣传图加上高斯模糊效果，作为整个海报的背景。使用stackblur-canvas实现。
StackBlur.image('coverImg', targetCanvas, 30, fales);
this.blur_img_src = targetCanvas.toDataUrl('image/png, 1');
最终得到base64格式的图片地址。其中由于页面长度会影响图片的绘制起止位置，设置海报容器position:fixed 即可解决。
-
在模糊图片加载完后，设置位置居中。
image.png
setImgPositionCenter(blurImg){
let card = this.$refs.card;// 获取海报容器组件
card.style.display = 'block';
let width = blurImg.clientWidth;
let height= blurImg.clientHeight;
blurImg.style['margin-left'] = '-' + Match.round(width/2)+'px';
blurImg.style['height'] = Match.floor(height)+'px';
}
-
需要合成的图片有多个，如下图所示，还有上面合成的背景图。在图片全部加载完成后。再合成最终的图片。跨域的图片，被浏览器拦截。需要添加 image.crossOrigin = "*"；服务端设置允许跨域访问。
使用html2canvas合成图片。
需要合成的图片
html2canvas(this.$refs.card,{
width: width,
height: height,
scale:1,
allowTaint: false,
useCORS:true,
}).then((canvas)=>{
let post_src = canvas.toDataURL('image/png', 1);
this.$refs.card.remove();
this.$emit('endCreatedPoster', poster_src)
)
-
出现文字重叠。设置文字间隔 letter-spacing:1px; 文字对齐 text-align:justify ;
字符串过长使用css隐藏 text-overflow:ellipse;over-flow:hidden;
white-space:nowrap; -
如果海报中有svg实现的图片，需要使用canvg处理转canvas。
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 214;
canvas.height= 214;
//将svg转canvas
let str = $('.html-card').find('svg').get(0).outerHTML;
let v = Canvg.fromString(ctx, str);
v.start();
//找出 html中的svg替换成canvas
let svgEl = $(".html-card").find("svg").get(0);
$(canvas).replaceAll(svgEl);
- 当网页需要在app中展示时，传值给ios或者安卓，可能需要讲base64地址去掉前缀“data:image/png;base64,”
网友评论