非php文字转图片生成分享
很多老坛也是喜欢用php生成图片,当然小编也有用php生成图片,比如网站价值评估的海报图片就是用php生成的。总的来说繁琐。小编还是热衷于JS组件去生成图片,比如小编的聊天室红包就是用JS生成图片的。效果如下:.
既然是分享,那我们就开始分享吧,首先得下载这个html2canvas.js ,网页引用这个就可以跳过了。下面开始用红包的构成html.
这是小编红包发送与接收的JS代码。
那我们要把这些红包的html这些东西生成图片,那接下来就封装个函数。
//红包封面图片生成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'); // 添加 <br> 标签实现换行imgElement.parentNode.insertBefore(brElement, imgElement.nextSibling);});}}, 100);}那把自己发送的红包生成图片,那就这么调用
convertToImage(redbaomyId);那把别人发送的红包生成图片,那就这么调用
convertToImage(redbaoyouId);是不是比php更方便快捷呢?
人家是为了seo,你这图片搜索引擎不认 不错不错。。
页:
[1]