html

<view class="canvasBox wth100" > <! -- <image :src="saveimg" mode="widthFix"></image> --> <canvas canvas-id="shareCanvas" style="width:100%; height: 410px;" v-if="canvas" ></canvas> </view> <view class="tc mt40"> <button class="cu-btn bg-purple wth50" </button> </view>Copy the code

methods

The canvas

Picture (){// make a poster

let _this = this; let p1 = new Promise(function (resolve, Reject) {/ / get the image path uni. GetImageInfo ({SRC: _this. Imgurl + _this. Goodslist. Zhutupian, success (res) {resolve (res); } }) }).then(res => { const ctx = uni.createCanvasContext('shareCanvas',_this); DrawImage (res.path, 0,0, 375, 300); drawImage(res.path, 0,0, 375, 300); // image ctx.setfillstyle ('#000000') // Text color: black ctx.setfontSize (16) // Text size: 16px ctx.fillText(_this.goodslist.mingchen, 10, Ctx.setfillstyle ('#E31013') ctx.setfontSize (20) CTX. FillText (" RMB "+ _this. Goodslist. Qianggoujia, 10, 380) / / draw text x/y coordinates (relative to the canvas) CTX. DrawImage (res) path, 240, 310, 90, 90); / / picture CTX. The stroke (); // The stroke() method actually draws the path defined by the moveTo() and lineTo() methods. The default color is black ctx.draw(false, _this.drawpicture ()); //draw() callback function})Copy the code

},

drawPicture() {

SetTimeout (function(){uni.canvastotempFilepath ({// Export the contents of the specified area of the canvas to generate the specified image, and return the file path x: 0, y: 0, width: 375, height: 410, destWidth: 750, // 'shareCanvas', success: function (res) { _this.saveimg=res.tempFilePath }, fail(erro) { } },_this)// },3000) clearTimeout()Copy the code

},

Save the picture

save(){

Var _this = this uni. SaveImageToPhotosAlbum ({filePath: _this saveimg, success: the function () {_this. Show (' successfully saved ')}});Copy the code

},