您的位置: 主页 > 贺卡 >

分享:纯前端 Canvas 完成 HTML 转图片主动天生微信

  功能很简单,选择一张图片,输入标题文字,下载即可得到一张 PNG 格式透明背景的圆角阴影卡片图。核心的步骤有这几个:

  其中关键一步 HTML 转图片,利用了著名的html2canvas库,其他几步都可以用 Canvas 轻松完成。

  const scale = getScale(); // 因为手机和 PC 的像素比不同,HTML 转图片时要进行放大,否则在手机上图片会比较模糊,通常 3 倍左右即可

  圆角阴影生成圆角矩形图片需要用到 Canvas 的 .clip() 方法,其作用是在 canvas 上只显示 clipping 区域内的内容。思路是先在 canvas 上画出一个圆角矩形,然后将上一步生成的图片「贴」进去。

  由于经过 clip 的 canvas 只显示 clipping 区域内的内容,所以不能在这个 canvas 上直接给图片增加阴影,而是要将该 canvas 绘制到一个更大的 canvas 上,然后给这个圆角矩形的 canvas 增加阴影。

  根据阴影尺寸决定背景 canvas 的尺寸。最终下载的图片的尺寸,就是背景 canvas 的尺寸。设置太小,阴影会显示不完整;设置太大,则边缘留白空间太大,浪费空间且影响使用。function drawShadow(origCanvas) {

本站文章于2019-10-07 06:38,互联网采集,如有侵权请发邮件联系我们,我们在第一时间删除。 转载请注明:分享:纯前端 Canvas 完成 HTML 转图片主动天生微信

Tag: 贺卡


标志 > 大发电玩-大发手机版-大发电玩手机版

当季热销| 投影仪| 贺卡| 圣诞专辑| 台历挂历| 对联红包|

网站备案号: Copyright © 2002-2017 DEDECMS. 织梦科技 版权所有版权所有:大发电玩-大发手机版-大发电玩手机版

Tag标签 网站地图

家电维修|北京赛车pk10

Copyright 2015 Enterprise Management Training Center All Rights Reserved.