前言

近期一直在做微信内H5页面，可能是由于自己的不熟悉，微信的jssdk文档一直在翻，几乎是变开发边学习微信的api，然后最近就被一个微信网页内生成一张个性化海报图片的效果给难住了，现虽然是解决了，但是这样的效果估计今后会用到很多，于是写篇博客记录一下。

需求

需求其实很简单，需要在网页内动态生成一张图片，图片内需包含用户头像，用户昵称，一些特定文字还有一张二维码。生成的这张图片使用来转发以及发送朋友圈的。并不是在页面上写一个dom结构就行，只有生成图片用户长按才能够保存或者转发。

解决方案

一开始看到这个需求我的想法是把那些海报上的元素全部画在canvas里面然后将canvas转成图片，实现过程中发现想法太简单了，原生canvas不支持画外链的图片，而用户的微信头像肯定是腾讯给的就必定是外链。然后经过探索就有了下面的方案

1、使用html2canvas插件

先上插件链接html2canvas
用来这个插件不得不叹服github的强大，原本使用原生的canvas画个稍微复杂一点的效果代码就很大一长串，各种函数相当麻烦，而html2canvas可以直接把一个dom结构转化成canvas，使用起来相当方便，只要事先把想要的海报效果用dom结构写出来然后使用html2canvas转一下就可以了，关键是html2canvas支持画外链的图片，但是需要配置一下参数。奉上html2canvas参数列表。其实设置支持外链图片就一个allowTaint参数，设置为true就行了，
看代码：

var convertCanvasToImage = function (canvas) {//将canvas转换成图片var src = canvas.toDataURL("image/png");return src;}
html2canvas(document.querySelector("#poster-canvas"), {allowTaint: true,//设置支持外链scale: 3}).then(canvas => {$(".poster-box").append('<img src="' + convertCanvasToImage(canvas) + '" alt=""  crossorigin="anonymous">');});

但是这仅仅解决了将外链图片画成canvas的问题，我在用这个插件的时候发现，外链的图片确实被画进了canvas，但是在将canvas转成图片的时候出现了问题，canvas.toDataURL这个将canvas转换成图片的接口似乎不允许canvas里面的元素带有外链的图片，好吧，又经了一番周折有了下面的第二步。

2、将微信头像转成base64再插进即将画成canvas的dom结构里面

首先声明，这个方法或许不是最好的方法，但目前我确实用这个方法解决问题了。微信头像的体积并不算大转成base64对网页运行的速度影响不大，将一张图片转成base64的方法大致有两种，一种是先转canvas再转base64，这种显然不适合现在这个场景，而另一种则是使用一个XMLHttpRequest请求来实现转化base64，直接上代码

function getBase64(imgUrl) {//转base64插入用户头像，imgUrl为图片链接window.URL = window.URL || window.webkitURL;var xhr = new XMLHttpRequest();xhr.open("get", imgUrl, true);xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {var blob = this.response;let oFileReader = new FileReader();oFileReader.onloadend = function (e) {console.log(e.target.result)//输出转化结果};oFileReader.readAsDataURL(blob);}}xhr.send();}

来到这一步基本上接解决基本问题了，最后还有一个问题，就是上面的那个imgUrl，腾讯拌了我一下，腾讯给的那个头像链接是不带文件后缀的，虽然也能够正常地浏览以及使用，但是在这里需要我们在那个url后面给他加一个图片后缀才能生效。这个真的是血的教训，因为在微信调试工具里面是能够正常看到效果的，但是真机测试上死活出不来，这个小细节还是我项目的后端发现的

微信网页内使用canvas生成个性化海报相关推荐

微信小程序使用canvas生成分享海报功能复盘
前言近期需要开发一个微信小程序生成海报分享的功能.在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理.但是由于小程序不具备传统意义的dom元素,所以也没有办法 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
Canvas绘图在微信小程序中的应用:生成个性化海报 1
一.Canvas应用的背景(个人理解)及基础语法背景从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样 ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...
小程序Canvas生成分享海报避坑指南
关于小程序使用Canvas画布生成分享海报,网上有很多的教程,但是结合到自己的业务上面就BUG百出了接下来分享一下我的经历微信出了新的api 微信公众平台目前更新不是太即使,查问题好多帖子都是一两 ...
uniapp微信小程序canvas生成简单海报并下载
今天项目接到个任务,就是手写canvas海报,并能下载图片.百度了很多海报组件,都不尽人意.萌生了自己手写海报的想法. 话不多说先贴文档 uni-app官网其实该文档和微信小程序类似最终效果,微信 ...
微信小程序使用canvas绘制分享海报
一.准备工作最近在做的一个vue项目中,需要做一个分享海报,头秃!!! 首先确定海报那些地方是随机变动的.海报背景.引用二维码生成组件(目前市场上有很多生成二维码的组件,这个项目用的是uqrcode ...
微信小程序-使用canvas生成含有微信头像的图片并分享
我们的需求是动态生成一个含有微信头像的图片作为分享图片. 我们在页面中添加cancas <view style='position:absolute;left:400rpx;'><c ...
canvas生成简易海报
效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head><meta content=" ...

微信网页内使用canvas生成个性化海报

微信网页内使用canvas生成个性化海报

前言

需求

解决方案

1、使用html2canvas插件

2、将微信头像转成base64再插进即将画成canvas的dom结构里面

微信网页内使用canvas生成个性化海报相关推荐

最新文章

热门文章