Yoo趣儿

Yoo趣儿 › Geek › 站长 › 非php文字转图片生成分享

非php文字转图片生成分享

查看 27|回复 2
作者：美文苑文学网   
很多老坛也是喜欢用php生成图片，当然小编也有用php生成图片，比如网站价值评估的海报图片就是用php生成的。总的来说繁琐。小编还是热衷于JS组件去生成图片，比如小编的聊天室红包就是用JS生成图片的。效果如下：
.


image.png (65.84 KB, 下载次数: 0)
下载附件
保存到相册
半小时前 上传

既然是分享，那我们就开始分享吧，首先得下载这个html2canvas.js ，网页引用这个就可以跳过了。下面开始用红包的构成html.
这是小编红包发送与接收的JS代码。


image.png (95.45 KB, 下载次数: 0)
下载附件
保存到相册
半小时前 上传

那我们要把这些红包的html这些东西生成图片，那接下来就封装个函数。
[ol]
  • //红包封面图片生成
  • function convertToImage(elementId) {
  • setTimeout(() => {
  • var element = document.getElementById(elementId);
  • if (element) {
  • html2canvas(element, {
  • ignoreElements: function(el) {
  • if (el.tagName === 'AUDIO') {
  • return true;
  • }
  • return false;
  • }
  • }).then(function(canvas) {
  • var imgData = canvas.toDataURL('image/png');
  • var imgElement = document.createElement('img');
  • imgElement.src = imgData;
  • imgElement.style.width = '339px';
  • imgElement.style.height = '110px';
  • element.parentNode.replaceChild(imgElement, element);
  • var brElement = document.createElement('br'); // 添加
    标签实现换行
  • imgElement.parentNode.insertBefore(brElement, imgElement.nextSibling);
  • });
  • }
  • }, 100);
  • }[/ol]复制代码那把自己发送的红包生成图片，那就这么调用
    [ol]
  • convertToImage(redbaomyId);[/ol]复制代码那把别人发送的红包生成图片，那就这么调用
    [ol]
  • convertToImage(redbaoyouId);[/ol]复制代码

    是不是比php更方便快捷呢？

    图片, 红包

    • 相关帖子

    abcdef   
    人家是为了seo,你这图片搜索引擎不认
    缪斯的情人   
    不错不错。。
    返回列表
    您需要登录后才可以回帖 登录 | 立即注册

    AD1

    热门主题

    热门板块

    问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

    公告

    标签|小黑屋|Yoo趣儿

    GMT+8, 2024-12-17 21:37 , Processed in 0.118640 second(s), 9 queries , Gzip On, MemCached On.

    Powered by Discuz! X3.2

    The happiest thing in the world is to strive for an ideal.

    返回顶部