This is my first time to write, want to record their problems in the technology; If you feel very dish chicken, please big guys jump straight to summary start reading

Effects need to be done:

Click the “Save” button to save the picture below to local (the button in the picture is removed), then use canvas to draw the picture, and then generate the picture, the generated picture is saved as the background picture. It’s so easy



WXML and JS:

<view class="imgBox">
    <image src="{{cardImg}}" mode="aspectFill" wx:if="{{cardImg}}" class='card-img'></image> 
</view>    
<button class='serve-btn' bindtap='serveCardImg'</button> <canvas canvas-id='testCanvas' class='testCanvas' style='width:{{screenWidth}}px; height:{{screenHeight}}px; '></canvas>Copy the code

const app = getApp(); import postrequst from'.. /.. /.. /static/js/loadRequest.js'Page({    data: {        img_url: ' '// screenWidth: 400, // screenHeight: 400, // screenHeight: 400, // onLoad:function(options) {        this.info()    },    onReady: function() {},    onShow: function() {},    onHide: function() {},    onUnload: function() {},    onPullDownRefresh: function() {},    onReachBottom: function() {},
    info: function() {// get the small program codelet id = 51        let data = {            path: 'pages/register/register? user_id=' + id        }        postrequst(app.globalData.httpHeader + '* * * * *' + id, data, 'Loading'.'POST').then(res => {            if (res.errCode == 0) {                this.setData({                    img_url: app.globalData.httpHeader + '/'+ res.data.url}) this.canvasdraw () // canvas}})}, canvasDraw(photoimg, codeImg) {// canvaslet_this = this; // Create canvas const CTX = wx.createcanvasContext ("testCanvas"); const sysInfo = wx.getSystemInfoSync(); // Get device screen size const screenWidth = sysinfo.screenWidth; // Get screen width const screenHeight = sysinfo.screenheight; This.setdata ({screenWidth: screenWidth, screenHeight: screenHeight}) //'http://******.jpg', 0, 0, 750, 1206, 0, 0, screenWidth, screenHeight);        letboxScale = 750 / screenWidth; / / ratiolet boxW = 574 / boxScale;        let boxH = 670 / boxScale;        let boxLeft = screenWidth / 2 - boxW / 2;        letboxTop = 186; CTX. DrawImage ('.. /.. /.. /static/images/HLY_friend_ctxBg.png', boxLeft, boxTop, boxW, boxH); / / text CTX. SetFillStyle ('#3f3f3f');        ctx.setFontSize(30 / boxScale);        ctx.fillText('By implementing the code spirit into everyday life', boxLeft + 60 / boxScale, boxTop + 120 / boxScale);        ctx.fillText('Inner health, peace and happiness. ', boxLeft + 120 / boxScale, boxTop + 160 / boxScale); // Small program qr codelet imgW = 292 / boxScale;        ctx.drawImage(this.data.img_url, boxLeft + imgW / 2, boxTop + 280 / boxScale, imgW, imgW);
        this.ctx = ctx;        this.ctx.draw(true, () => {            wx.canvasToTempFilePath({                canvasId: 'testCanvas',                fileType: 'jpg', quality: 1, success: res => { _this.setData({ cardImg: res.tempFilePath }) }, fail: (err) => {} }) }); }, WXDownload(loadUrl) {// Download the imagereturn new Promise((resolve, reject) => {            wx.downloadFile({                url: loadUrl,                success: res => {                    if (res.statusCode === 200) {                        resolve(res.tempFilePath)                    }                }            })        })    },    serveCardImg() {/ / save business card to the photo album wx. SaveImageToPhotosAlbum ({filePath: this. Data. CardImg, success (res) {wx. ShowToast ({title:'Saved successfully'}); },fail()}, {}})})Copy the code

Everything is fine and the result is as follows



Then the phone was tested and found



What the hell? Where’s my girl? Where is she? After unremitting search and inquiry, found a problem

Canvascontext.drawimage () references online image previews and live tests are not displayed

This problem is very good to solve, the network picture download to the local OK; Well, keep testing



Girl and QR code out (happy) but problem one solved, there is problem two

Problem 2: wx.canvastotempFilepath () generates only small portions of the image

I don’t know why this happens. I thought it was the picture, but it was not found through various tests. Finally, dynamically obtain the width and height of the canvas after write dead. After the solution suddenly thought of the problem was not completely solved, because the TWO-DIMENSIONAL code is dynamic access. Through query and inquiry, we found wx.getimageInfo (), which can change the network address into the local address of wechat, thus solving this problem

conclusion

Solution to problem 1: make it a local address via wx.getimageInfo (), or download online images to local import. Solution to problem 2: Write out the width and height of the canvas and add the size when calling wx.canvastotempFilepath ()

conclusion

Wx.getimageinfo () does not exist. Wx.getimageinfo () does not exist. Meng Xin was curious, but couldn’t find a reason. Finally, thank you for your answer and watching. Thank you very much!