canvas做海报,小程序canvas生成海报

　　本文介绍canvas微信海报分享，分享给大家，如下：

　　随机生成一张图片，获取微信用户头像和昵称(通过调整后端接口获取)。将用户的头像和昵称与随机生成的图片组合在一起，形成海报。也许前一页用户也有愿望文本要填写。

　　实现效果图

　　记录下在实现功能过程中遇到的问题

　　Canvas在微信浏览器中只要长按就不能分享img(那我就换算成img)。转换成img后可以在微信开发者工具显示，但是真机无效(想哭)。度娘说，可能是图片跨域，用户头像要圆角。我说我不会。刚看了画布api文档，对度娘没有好感。用指定宽度的单词填充的画布必须换行。我说我只知道各种指定宽度的字都是对齐的。高清画面下画布模糊的问题(不知道度娘怎么能这么啰嗦)canvas . witdt=inner width * devicepixelrerationHTML结构。

　　div class= imgBox v-斗篷img:src= img src v-if= img src //div CSS

　　样式* { margin:0；填充：0；} body，html { width:100%；身高：100%；} .imgBox {宽度：100%；身高：100%；} img {宽度：100%；显示：块；}/样式脚本

　　//js主结构newvue ({el: img box ，数据：{urlparam: {}，//获取url中的逐值对象randomnum: 1，//随机数用于确定哪个祝福页面用户名：，//用户调用它imgSrc: ，//合成最终图片userImg: ，//用户的头像图片userMessage: ，//用户的消息}，方法：{//分享到流域朋友圈wxShareFriends: function () {}，//初始化请求头WX http:function(){ }Ajax setup({ headers:{ x-csrf-token :$( meta[name= csrf-token ])。attr( content )})；}，//获取随机数[1，10]random numbers(){ this . random num=math . ceil(math . random()* 10)}，//获取微信用户的头像和称呼以及Get userinfo(){ var VM=this；$.post(API请求地址，函数(数据){ if(data . code==1){ VM . user img=data . data . head img；vm .用户名=data . data . nickname；if(VM . random num % 2==0){ VM . user message=红尘相逢，白头偕老。多少年过去了，千古相见，微妙。而神圣的东西， } else {vm.userMessage=红尘相遇，岁月苍老 }} VM。$ next tick(function(){ VM . drawcanvasbgimg()；}}}}}，//获取页面dpr和宽度getwindowinfo(){ var window info={ }；window info . DPR=window . devicepixelrratio；if(window . inner width){ window info . width=window . inner width；} else { window info . width=document . body . client width；}返回windowInfo}，//绘制活动页面分享背景大图drawCanvasBgImg () {}，//在背景图片的画布上剪一个圆并填入用户头像drawcanvasuserimg (canvas，CTX，DPR) {}，//填入用户名或用户消息canvasFillText (canvas，Ctx，DPR，circleR) {}，//合成base64位共享图ConvertCanvasToImage(canvas){ this . img src=canvas . toda taurl( image/JPEG )//png有毒。你不能跳过这个。Android下识别二维码的$ spin . hide()；} }})画图方法步骤

　　drawcanvasbgimg()drawcanvasusermg(canvas，ctx，dpr) canvasFillText (canvas，ctx，dpr，circle)convertcanvastoimage(canvas)010-5900

　　//拿到数据后开始画背景大图想法很简单就是把图片画到-肉桂中然后在画布上再画头像文字让后转成img drawcanvasbgimg(){ var VM=this；var canvas=文档。创建元素(“canvas”)；var CTX=画布。获取上下文(“2d”)；var客户端宽度=this。getwindowiinfo().宽度；//获取屏幕宽度用于-肉桂宽度自适应移动端屏幕var dpr=this。getwindowinfo().dprCTX。全局合成= source-atop ；/**坑锯齿感觉没什么用不知道是不是用错地方了* *画布。宽度=DPR *客户端宽度；//由于手机屏幕时视网膜（视网膜)屏，都会多倍渲染，用项目文件来动态设置画布宽高，避免图片模糊画布。高度=DPR *客户端宽度* 609/375；//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609 var img=new image()；img。交叉原点=；//死坑的图片跨域(img.crossOrigin=Anonymous)这种写法还是不能显示64号基地格式图片)img。src= http://XXX 这个。随机的.使用jpeg文件交换格式存储的编码图像文件扩展名格式；img。onload=函数(){ CTX。绘制图像(img，0，0，canvas.width，canvas。身高)；VM。drawcanvasusermg(画布、ctx、DPR)；},010-5900

　　//在背景图片的画布上截取一个圆然后填充入用户头像drawcanvasusermg:function(canvas，ctx，DPR){ var VM=this；var circler=50 * dpr://半径var circleX=canvas.width/2://圆心x个坐标var circley=50 * dpr//圆心然后呢坐标var img x=circlex-circle；//图片x个开始坐标var img=circley-circle；//图片然后呢开始坐标var imgwidth=2 * circler//图片按圆形大小var img=new Image():img。交叉原点=；img。src=这个。userimgimg。onload=函数(){ CTX。save()；//保存当前ctx(电子商务)的状态ctx.arc(circleX，circleY，circle，0.2 * math).(pi)；//画出圆ctx.clip()://裁剪上面的圆形ctx.drawImage(img、imgX、imgWidth、img width)；//在刚刚裁剪的园上画图ctx.restore()://还原状态vm.canvasFillText(canvas、ctx、dpr、circular)；},010-5900

　　//填写用户称呢或者用户留言canvasfilltext(canvasfilltext，canvas，ctx，dpr，circle){ var font size=DPR * 20 px arial "；var用户名=0；//用户名然后呢轴坐标var userMessageX=dpr * 40://用户留言x个轴坐标var usermessagey=0://用户留言然后呢轴坐标定义变量载荷基板ex=0；//字符串下标var线宽=0://一行宽度var allTextWidth=0://所有字符宽度ctx。font=fontsizethis//需要用户名是写入用户名如果(这个。用户名){ username=circle * 2.5ctx。fillstyle= #0094 ffctx。textalign= center CTX . fill text(this . username，canvas.width/2，username)；}如果(这个。用户消息){用户消息=用户名DPR * 35；ctx。fillstyle= #000//获取字符宽度for(var I=0)；我这个。用户消息。长度(I){所有文本宽度=CTX。测量文本(此。用户消息[I]).宽度；} //字符串长度大于画布区域要换行如果(全文本宽度画布。width-2 * user messagex){ for(var I=0)；我这个。用户消息。长度(I){线宽=CTX。测量文本(此。用户消息[I]).宽度；如果(线宽画布。width-2 * usermessagex){ CTX。text line= left ；CTX。填充文本(this。用户消息。substr(lastsubstanex，I)、userMessageX、user message y)；usermessagey=dpr * 25//设置行高线宽=0:荷载基板=I；} if(I==this。用户消息。长度-1){ CTX。填充文本(this。用户消息。substr(lastsubstanex，i 1)，userMessageX，user messagey)；} } else { //小于者居中显示ctx。textalign= center CTX . fill text(this . user message、canvas.width/2、用户消息)；} }这。convertcanvastoimage(画布)；},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读