李志成的个人网站

李志成的个人网站

  • 博客
  • ·
  • 留言
  • ·
  • 友链
  • ·
  • 关于
  • ·
  • Rss

使用html2canvas实现海报分享

发表于2019-02-15 08:28:26分类于前端0条评论阅读次数75

使用技术库

原理

利用html2canvas把html转为canvas,在把canvas转为base64的图片格式,并呈现到img标签上

实现效果(👇猛戳!!!)

demo:http://www.lizc.me/demos/5c6671c4eac6f50015b0cfb4

核心代码:

html2canvas(document.querySelector("#capture"), {
    useCORS: true//非必须
}).then(canvas => {
    document.getElementById('capture').style.display = 'none';//非必须
    const img = document.getElementById('image');
    img.crossOrigin = "anonymous";//非必须
    img.src = canvas.toDataURL("image/png", 1)
});

注意

  • 避免图片跨域,否则不能生成canvas(极其重要)
  • 考虑在原图片基础上进行绘画,而不是缩放后进行绘画,方便操作
  • 模糊时,应该调整海报设计,而不是html2canvas的缩放

--发表评论--

🚀support markdown (* ̄▽ ̄*)ブ