web海报合成，实现高斯模糊效果

需求：
将课程宣传图、课程信息（标题、价格、链接二维码）及用户信息（用户名和头像）合成海报。最终效果如图所示

最终合成图

步骤分析：

• 从后台获取课程信息，用户信息。

• 图片大小设定为宽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,”