在微信小程序中怎么使用canvas+Painter插件制作二维码（微信小程序canvas画图）

一、实现原理

使用微信小程序的canvas组件进行绘制，但是在该组件用起来并不是很顺手，所以使用了第三方的框架：Painter

用你的方法，把这个框架下载下来，里面会有示范代码，我们只需要把其中的核心代码拿出来就行。

二、实现代码

前期准备

1、新建components文件夹，放置painter核心代码

2、新建palette文件夹，放置绘制实现代码

painter.js代码

exportdefaultclassLastMayday{

palette(viewList){
    
return(
viewList
);

}

}
    

3、新建绘制的具体属性信息文件夹posterViewjs，放置例如绘制的大小、位置等信息js。

二维码绘制属性信息js代码

constgetPosterView01=(qrcodeText)=>
{

constposter01={

"width":"256px",
"height":"256px",
"background":"#f8f8f8",
"views":[{

"type":"qrcode",
"content":qrcodeText,
"css":{

"color":"#000000",
"background":"#ffffff",
"width":"256px",
"height":"256px",
"top":"0px",
"left":"0px",
"rotate":"0",
"borderRadius":"0px"
}

}
]
}

returnposter01
}


module.exports={

getPosterView01:getPosterView01
}
    

实现

实现页面目录结构

wxml代码

viewclass="flex-jc-ac-col"style="margin-top:200rpx;
    ">

imageclass="qrcode-img"src="{
{
imgUrl?imgUrl:''}
}
    "mode="widthFix">
    /image>
    
buttontype="primary"style="margin-top:105rpx;
    "bindtap="makeQRCodeTap">
    生成二维码/button>
    
/view>
    

!--canvas隐藏-->
    
paintercustomStyle='position:absolute;
    left:-9999rpx;
'customActionStyle="{
{
customActionStyle}
}
"
dancePalette="{
{
template}
}
"palette="{
{
paintPallette}
}
"bind:imgOK="onImgOK"bind:touchEnd="touchEnd"
action="{
{
action}
}
"use2D="{
{
true}
}
    "widthPixels="720"/>
    
!--canvas隐藏-->
    

wxss代码

.qrcode-img{
    
background-color:#999999;
    
height:300rpx;
    
width:300rpx;

}
    

json代码

注意记得在使用的页面引用painter组件

{

"usingComponents":{

"painter":"/components/painter/painter"
}
,
"navigationBarTitleText":"绘制二维码"
}
    

JS代码

//pages/makeQRCode/makeQRCode.js
importposterfrom'../../palette/painter'
constposterView=require("../../posterViewjs/posterView")
Page({


/**
*页面的初始数据
*/
data:{

imgUrl:null,
QRCodeText:"2d44d6c26134f8a109df65897107089a2d44d6c26134f8a109df65897107089a",
paintPallette:'',
}
,

/**
*生命周期函数--监听页面加载
*/
onLoad(){


}
,

/**
*生命周期函数--监听页面显示
*/
onShow(){


}
,

/**生成海报点击监听*/
makeQRCodeTap(){

wx.showLoading({

title:'获取海报中',
mask:true
}
)
//绘制海报
this.makePoster(this.data.QRCodeText)
}
,

/**绘制完成后的回调函数*/
onImgOK(res){

wx.hideLoading()
//这个路径就可以作为保存图片时的资源路径
//console.log("海报临时路径",res.detail.path)
this.setData({

imgUrl:res.detail.path
}
)
}
,

/**生成海报*/
makePoster(qrcodeText){

wx.showLoading({

title:'生成海报中',
}
)
//这是绘制海报所用到JSON数据
constviewList=posterView.getPosterView01(qrcodeText)
this.setData({

paintPallette:newposter().palette(viewList)
}
)
}
,



/**
*用户点击右上角分享
*/
onShareAppMessage(){
}

}
    )

“在微信小程序中怎么使用canvas+Painter插件制作二维码”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！