<canvas style="width:355px; height:528px; background:#ffffff;visibity: hidden;position: absolute; top: -10000px; left:-10000rpx;" canvas-id="firstCanvas"> </canvas>
canvas can be hidden in style, but it can not use display: none;
js code:
onLoad: function (options) {
let _this = this;
const ctx = wx.createCanvasContext('firstCanvas');
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 355, 528);
// _this.drawtouxiang(ctx);
// var path1='/images/avatar.png';
var path1=_this.data.touxiang;
ctx.drawImage(path1,10,15,50,50);
var path2=_this.data.newsimg;
ctx.drawImage(path2,10,80,335,190);
var path3=_this.data.imgtuijian;
ctx.drawImage(path3,10,443,66,66);
// 设置背景颜色
this.drawText(ctx);
// ctx.draw();
ctx.draw(true,setTimeout(function(){
},1000));
console.log(ctx);
},
drawText: function (CTX) {
// ctx.setFillStyle ( '# FFFFFF');
// ctx.fillRect (0, 0, 355, 528);
// Nick: I want to buy
ctx.setFontSize (16); // set the font size
ctx.setFillStyle ( '# 333333'); // set the font color
ctx.fillText ( 'I want to buy a house', 75,31); // set the font content, coordinate
// you recommend
ctx.setFontSize (10 );
ctx.setFillStyle ( '# 596A86');
ctx.fillText ( 'recommend to you', 149,31);
// this wonderful good News! Come and take a look at me!
ctx.setFontSize (13);
ctx.setFillStyle ( '# 999999');
ctx.fillText ( 'Come this wonderful information and I look good together!!', 75,56);
! // Congratulations Nansha capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households
ctx.setFontSize (18);
ctx.
// Text wrapping
var text = 'Congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households ';
// new line, three lines
var text2 =' Congratulations Nansha Grand-funded 8.0 billion inventory of 400,000 flat land!! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion revitalize the 4 ... sand! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of households, congratulations Nansha! Large capital 8.0 billion inventory of 400,000 flat land! Tyrant village to a large number of families, ';
this.dealWords ({
CTX: CTX, // canvas context
fontSize: 18, // font size
FillStyle: '# 333333',
Word: text, the text // need to handle
maxWidth: 325, // maximum width of a line of text
x: 10, // text to be displayed on the x-axis positions
y: 285, // text y to display the position of the shaft
maxLine: 2 // number of lines of text displayed up
});
this.dealWords ({
CTX: CTX, // canvas context
fontSize: 14, // font size
FillStyle: '# 666666',
Word: text2 , // need to handle word
maxWidth: 325, // maximum width line of text
x: position 10, the text // x-axis to be displayed in
the position 346, // text to be displayed in the y-axis: y
maxline: //. 3 the most number of lines of text displayed
});
ctx.setFontSize (16); // set the font size
ctx.setFillStyle ( '# 333333'); // set Font color
ctx.fillText ( '. Whatever', 91,463); // set the font content, coordinate
// press identifying, obtaining more content
ctx.setFontSize (14); // set the font size
ctx.setFillStyle ( '# 999999' ); // set the font color
ctx.fillText ( 'long press identification for more exciting content', 91,493); // set the font content, coordinate
},
Click the Save button to save the picture:
When you save the picture, it must first determine whether the letter has been authorized to micro
saveimg: function () { console.log ( ' click the Save Image ' ); the let that = the this ; // authorized for placement album which wx.getSetting ({ Success (RES) { IF ! (res.authSetting [ ' scope. writePhotosAlbum ' ]) { wx.authorize ({ scope: ' scope.writePhotosAlbum ' , Success () { // user has agreed applet album function, subsequent calls to the interface does not pop wx.saveImageToPhotosAlbum inquiry that.saveablum () }, Fail () { that.setData ({ openauthpop: true }); // that.handleSetting(res); } }) }else{ that.saveablum() } } }); },
saveablum: function () { the let imageWidth = the this .data.imageWidth, imageHeight = the this .data.imageHeight; wx.canvasToTempFilePath ({ // the canvas generated image canvasId: ' firstCanvas ' , X: 0 , Y: 0 , width: imageWidth, height: imageHeight, destWidth: imageWidth, // extraction width of the canvas destHeight: imageHeight, // taken canvas height of success: function (res) { wx.saveImageToPhotosAlbum ({ // save the image to an album filePath: res.tempFilePath, Success: function () { wx.showToast ({ title: " ! images generated success " , DURATION: 2000 }) }, Fail: function () { }, }) }, Fail: function (RES) { the console.log (RES); } }) },
If the user cancels the authorization written an album, it must give a button to call
<view class="wrap" wx:if="{{openauthpop}}" bindtap="hiddenauthphp"></view>
<view class="authpop" wx:if="{{openauthpop}}">
<view class="title">警告</view>
<view class="content">若不打开授权，则无法将图片保存在相册中！</view>
<view class="xian"></view>
<view class="btn">
<button class="bt left" bindtap="hiddenauthphp">取消</button>
<button class="bt right" open-type="openSetting" bindopensetting='handleSetting'>确定</button>
</view>
</view>
.wrap{
position: fixed;
left: 0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,0.3);
}
.authpop{
position: fixed;
top: 30%;
left: 10%;
width: 600rpx;
height:230rpx;
z-index: 1003;
background:#FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
border-radius:30rpx;
}
.authpop .title{
font-size: 36rpx;
color: #333333;
padding: 10rpx;
width:600rpx;
display: flex;
justify-content: center;
}
.authpop .content{
font-size: 20rpx;
color: #999999;
padding: 5rpx;
width:600rpx;
display: flex;
justify-content: center;
}
.authpop .xian{
width: 500rpx;
height: 1rpx;
background:#f5f5f5;
margin-top: 10rpx;
}
.authpop .btn{
display: flex;
width: 600rpx;
height: 50rpx;
padding-top: 1rpx;
background: #FFFFFF;
}
.bt::after{
border: none;
}
.bt{
background-color: #fff;
border-radius:0;
width: 49%;
padding-top: 5rpx;
display: flex;
justify-content: center;
}