1、使用wxml-to-canvas生成海报
demo效果图
1、npm install --save wxml-to-canvas
2、小程序页面json中引入
{
"usingComponents": {
"wxml-to-canvas": "wxml-to-canvas"
}
}
3、使用组件
index.wxml
index.js控制生成海报和保存海报
const { wxml, style } = require('./demo.js')
Page({
data: {
src: ''
},
onLoad() {
this.widget = this.selectComponent('.widget')
},
onReady() {
setTimeout(()=>{
this.renderToCanvas()
},150)
},
//生成海报
renderToCanvas() {
const p1 = this.widget.renderToCanvas({ wxml, style })
p1.then((res) => {
console.log('container', res.layoutBox)
this.container = res
})
},
//保存海报
extraImage() {
const p2 = this.widget.canvasToTempFilePath()
p2.then(res => {
console.log(res)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res)
}
})
}).catch(err=>{
console.log(err)
})
}
})
demo.js中配置海报样式
const wxml = `
测试号
邀请您参与助力活动
测试测试测试测试测试测试
`
const style = {
container: {
position:'relative',
width: 375,
height: 667,
backgroundColor: '#ccc',
flexDirection: 'column',
alignItems:'center'
},
bg: {
position:'absolute',
left:0,
top:0,
width: 375,
height: 667
},
bgTop: {
marginTop:16,
width:344,
height:210,
borderRadius:8
},
logo: {
marginTop:-22,
width:48,
height:48,
borderRadius:24
},
name: {
marginTop: 6,
width: 300,
lineHeight:'1',
height: 18,
textAlign:'center',
fontSize:12,
color:'#999'
},
sharetext: {
marginTop: 6,
width: 300,
lineHeight:'1',
height: 18,
textAlign:'center',
fontSize:12,
color:'#999'
},
title: {
marginTop:20,
width: 300,
height: 60,
textAlign:'center',
fontWeight: 'bold',
fontSize:22,
color:'#333'
},
code: {
marginTop:50,
width:100,
height:100,
borderRadius:50
}
}
module.exports = {
wxml,
style
}
2、使用Canvas 2D生成海报
index.wxml
index.js
let CodeUrlbg = '/static/bg.jpeg'; //背景图片
let ctx, canvas;
Page({
data: {},
onLoad: function () {
},
onReady() {
const query = wx.createSelectorQuery()
query.select('#canvas_box').fields({
id: true,
node: true,
size: true
}).exec(this.init.bind(this))
},
//初始化画布
init(res) {
canvas = res[0].node
ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio; //获取屏幕的像素比 值为2
//新接口需显示设置画布宽高； w*2 h*2
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr); //缩放
//向画布载入图片的方法
this.canvasDraw(ctx, canvas).then(res => {
//图片头像渲染完成之后，渲染文字
this.drawText(ctx)
})
},
// 绘制背景图
canvasDraw(ctx, canvas) {
return new Promise(resolve => {
let img = canvas.createImage(); //创建img对象
img.src = CodeUrlbg;
img.onload = () => {
ctx.drawImage(img, 0, 0, 375, 430);
let timer = setTimeout(() => {
resolve(true);
clearTimeout(timer);
}, 100);
};
})
},
//绘制文字
drawText(ctx) {
ctx.font="30px Verdana";
// 创建渐变
var gradient = ctx.createLinearGradient(0, 0, 375, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 用渐变填色
ctx.fillStyle = gradient;
ctx.fillText('测试测试测试123', 50, 50); // ctx.fillText(文字, 移动x, 移动y)
},
// 保存到相册
saveToAlbum() {
wx.canvasToTempFilePath({ //将canvas生成图片
canvas: canvas,
x: 0,
y: 0,
width: 690,
height: 995,
destWidth: 690 * 2, //截取canvas的宽度
destHeight: 995 * 2, //截取canvas的高度
success: function (res) {
console.log('生成图片成功：', res)
wx.saveImageToPhotosAlbum({ //保存图片到相册
filePath: res.tempFilePath,
success: function (res) {
wx.showToast({
title: "保存图片成功！",
duration: 2000
})
}
})
},
}, this)
}
})
微信小程序中生成二维码weapp-qrcode-canvas-2d
微信小程序中生成二维码
/**
* weapp.qrcode.js v1.1.2 (undefined)
*/
var hasOwn=Object.prototype.hasOwnProperty,toStr=Object.prototype.toString,defineProperty=Object.defineProperty,gOPD=Object.getOwnPropertyDescriptor,isArray=function(t){return"function"==typeof Array.isArray?Array.isArray(t):"[object Array]"===toStr.call(t)},isPlainObject=function(t){if(!t||"[object Object]"!==toStr.call(t))return!1;var e,r=hasOwn.call(t,"constructor"),o=t.constructor&&t.constructor.prototype&&hasOwn.call(t.constructor.prototype,"isPrototypeOf");if(t.constructor&&!r&&!o)return!1;for(e in t);return void 0===e||hasOwn.call(t,e)},setProperty=function(t,e){defineProperty&&"__proto__"===e.name?defineProperty(t,e.name,{enumerable:!0,configurable:!0,value:e.newValue,writable:!0}):t[e.name]=e.newValue},getProperty=function(t,e){if("__proto__"===e){if(!hasOwn.call(t,e))return;if(gOPD)return gOPD(t,e).value}return t[e]},extend=function t(){var e,r,o,n,i,a,s=arguments[0],u=1,l=arguments.length,h=!1;for("boolean"==typeof s&&(h=s,s=arguments[1]||{},u=2),(null==s||"object"!=typeof s&&"function"!=typeof s)&&(s={});u=7&&this.setupTypeNumber(t),null==this.dataCache&&(this.dataCache=QRCode.createData(this.typeNumber,this.errorCorrectLevel,this.dataList)),this.mapData(this.dataCache,e)},setupPositionProbePattern:function(t,e){for(var r=-1;r<=7;r++)if(!(t+r<=-1||this.moduleCount<=t+r))for(var o=-1;o<=7;o++)e+o<=-1||this.moduleCount<=e+o||(this.modules[t+r][e+o]=0<=r&&r<=6&&(0==o||6==o)||0<=o&&o<=6&&(0==r||6==r)||2<=r&&r<=4&&2<=o&&o<=4)},getBestMaskPattern:function(){for(var t=0,e=0,r=0;r<8;r++){this.makeImpl(!0,r);var o=QRUtil.getLostPoint(this);(0==r||t>o)&&(t=o,e=r)}return e},createMovieClip:function(t,e,r){var o=t.createEmptyMovieClip(e,r);this.make();for(var n=0;n>r&1);this.modules[Math.floor(r/3)][r%3+this.moduleCount-8-3]=o}for(r=0;r<18;r++){o=!t&&1==(e>>r&1);this.modules[r%3+this.moduleCount-8-3][Math.floor(r/3)]=o}},setupTypeInfo:function(t,e){for(var r=this.errorCorrectLevel<<3|e,o=QRUtil.getBCHTypeInfo(r),n=0;n<15;n++){var i=!t&&1==(o>>n&1);n<6?this.modules[n][8]=i:n<8?this.modules[n+1][8]=i:this.modules[this.moduleCount-15+n][8]=i}for(n=0;n<15;n++){i=!t&&1==(o>>n&1);n<8?this.modules[8][this.moduleCount-n-1]=i:n<9?this.modules[8][15-n-1+1]=i:this.modules[8][15-n-1]=i}this.modules[this.moduleCount-8][8]=!t},mapData:function(t,e){for(var r=-1,o=this.moduleCount-1,n=7,i=0,a=this.moduleCount-1;a>0;a-=2)for(6==a&&a--;;){for(var s=0;s<2;s++)if(null==this.modules[o][a-s]){var u=!1;i>>n&1)),QRUtil.getMask(e,o,a-s)&&(u=!u),this.modules[o][a-s]=u,-1==--n&&(i++,n=7)}if((o+=r)<0||this.moduleCount<=o){o-=r,r=-r;break}}}},QRCode.PAD0=236,QRCode.PAD1=17,QRCode.createData=function(t,e,r){for(var o=QRRSBlock.getRSBlocks(t,e),n=new QRBitBuffer,i=0;i8*s)throw new Error("code length overflow. ("+n.getLengthInBits()+">"+8*s+")");for(n.getLengthInBits()+4<=8*s&&n.put(0,4);n.getLengthInBits()%8!=0;)n.putBit(!1);for(;!(n.getLengthInBits()>=8*s||(n.put(QRCode.PAD0,8),n.getLengthInBits()>=8*s));)n.put(QRCode.PAD1,8);return QRCode.createBytes(n,o)},QRCode.createBytes=function(t,e){for(var r=0,o=0,n=0,i=new Array(e.length),a=new Array(e.length),s=0;s=0?g.get(c):0}}var d=0;for(h=0;h=0;)e^=QRUtil.G15<=0;)e^=QRUtil.G18<>>=1;return e},getPatternPosition:function(t){return QRUtil.PATTERN_POSITION_TABLE[t-1]},getMask:function(t,e,r){switch(t){case QRMaskPattern.PATTERN000:return(e+r)%2==0;case QRMaskPattern.PATTERN001:return e%2==0;case QRMaskPattern.PATTERN010:return r%3==0;case QRMaskPattern.PATTERN011:return(e+r)%3==0;case QRMaskPattern.PATTERN100:return(Math.floor(e/2)+Math.floor(r/3))%2==0;case QRMaskPattern.PATTERN101:return e*r%2+e*r%3==0;case QRMaskPattern.PATTERN110:return(e*r%2+e*r%3)%2==0;case QRMaskPattern.PATTERN111:return(e*r%3+(e+r)%2)%2==0;default:throw new Error("bad maskPattern:"+t)}},getErrorCorrectPolynomial:function(t){for(var e=new QRPolynomial([1],0),r=0;r5&&(r+=3+i-5)}for(o=0;o=256;)t-=255;return QRMath.EXP_TABLE[t]},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)},i=0;i<8;i++)QRMath.EXP_TABLE[i]=1<=1&&n<=127?e+=t.charAt(r):n>2047?(e+=String.fromCharCode(224|n>>12&15),e+=String.fromCharCode(128|n>>6&63),e+=String.fromCharCode(128|n>>0&63)):(e+=String.fromCharCode(192|n>>6&31),e+=String.fromCharCode(128|n>>0&63));return e}function drawQrcode(t,e){if(t=t||{},(t=extend(!0,{canvasId:"myQrcode",text:"爱一个人就要勇敢说出来",width:260,height:260,padding:20,typeNumber:-1,correctLevel:QRErrorCorrectLevel.H,background:"#ffffff",foreground:"#000000",image:{imageResource:"",width:80,height:80,round:!0}},t)).canvasId||t.canvas){if(t.paddingColor||(t.paddingColor=t.background),e){var r=new QRCode(t.typeNumber,t.correctLevel);return r.addData(utf16to8(t.text)),r.make(),new Promise(function(t,e){t(r)})}return new Promise(function(e,r){return e(function(){var e=new QRCode(t.typeNumber,t.correctLevel);e.addData(utf16to8(t.text)),e.make();const r=wx.getSystemInfoSync().pixelRatio;var o=t.canvas;const n=o.getContext("2d");o.width=t.width*r,o.height=t.width*r;const i=o.width;n.fillStyle=t.paddingColor,n.fillRect(0,0,i+2*t.padding,i+2*t.padding);for(var a=(i-2*t.padding)/e.getModuleCount(),s=(i-2*t.padding)/e.getModuleCount(),u=0;u>>7-t%8&1)},put:function(t,e){for(var r=0;r>>e-r-1&1))},getLengthInBits:function(){return this.length},putBit:function(t){var e=Math.floor(this.length/8);this.buffer.length<=e&&this.buffer.push(0),t&&(this.buffer[e]|=128>>>this.length%8),this.length++}};export default drawQrcode;
使用demo
import drawQrcode from './weapp.qrcode.js'//路径根据实际引用的页面路径自行改变
Page({
data: {
},
onReady() {
const query = wx.createSelectorQuery()
query.select('#myQrcode')
.fields({
node: true,
size: true
})
.exec(async (res) => {
var canvas = res[0].node
var img = canvas.createImage();
img.src = "../../static/bg.jpeg"//二维码中间的头像
img.onload = function () {
// img.onload完成后才能调用 drawQrcode方法
var options = {
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
paddingColor: '#fff',
background: '#fff',
foreground: '#000000',
text: 'https://gitee.com/w386888618/weapp-qrcode-canvas-2d',
image: {
imageResource: img,
width: 80, // 建议不要设置过大，以免影响扫码
height: 80, // 建议不要设置过大，以免影响扫码
round: true // Logo图片是否为圆形
}
}
drawQrcode(options)
// 获取临时路径（得到之后，想干嘛就干嘛了）
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 600,
destHeight: 600,
canvasId: 'myQrcode',
canvas: canvas,
success(res) {
console.log('二维码临时路径为：', res.tempFilePath)
},
fail(res) {
console.error(res)
}
})
};
})
},
})