Micro-channel small program to generate and save a picture canvas

--- --- restore content begins

Canvas micro-channel applet generating and storing the image, as embodied in FIG effect

   

The following steps needs to be done to achieve the effect of work

A first obtaining the user's screen before you can define the size of the canvas according to the screen size

Second, the acquired images (two-dimensional code) width and height, such as scaling and image to draw in canvas

Third, the text layout

Fourth, the canvas content generation image and save it locally

Save Five, and pictures into the album

Specific code looks more than the main logic code, to show segment

/ * Page data define the required parameters * / 
data { 
    // Canvas 
    _width: 0, // phone screen width 
    _heigth: 0, // phone screen high 
    swiperHeight: 0, // main map picture height 
    canvasType: false // Canvas whether show 
    loadImagePath: '', // download pictures 
    imageUrl: 'http://imgo2o.shikee.com/goods/2019/10/17/201910171144361688.jpg', // main map the network path 
    codeUrl: 'http: // imgo2o.shikee.com/couponqrcode/2019/10/18/86_215.jpg',// two-dimensional code network path 
    localImageUrl: '', // draw pictures of goods local path 
    localCodeUrl: '', // draw two-dimensional picture yards local path 
    loadType: flase  // save the picture, Share Friends Btn 
}

 

/ * Triggered when the page is loaded primary view image loading 
 <Image the src = "{{Item}}" class = "IMG" MODE = "widthFix" bindload = "onSwiperLoad"> </ Image> 
* / 
onImgLoad: function (E) { 
    the let oImgW = e.detail.width; // image original width 
    the let oImgH = e.detail.height; // pictures of the original height of 
    the let imgWidth = 750; // width of the image provided 
    the let Scale = imgWidth / oImgW; // ratio calculating 
    the let imgHeight = oImgH * Scale; 

    the this .setData ({ 
        swiperHeight: swiperHeight, 
    }) 
}

 

/ * By generating image button * / 
getsysinfo: function () {
     / * Get Mobile Width Height * / 
    the let that = the this 
    the let imgHeigth = the this .data.swiperHeight 
    the let for imgUrl = the this .data.imageUrl 
    the let qrcodeUrl = the this .data. codeUrl 
    wx.getSystemInfo ({ 
        Success (RES) { 
            that.setData ({ 
                the _width: res.windowWidth, 
                _heigth: res.windowHeight, 
                canvasType: to true , 
            })
             //Acquiring image information generation Canvas 
            that.getImginfo ([for imgUrl, qrcodeUrl], 0 ); 
        } 
    }) 
}

 

// Get Image 
getImginfo: function (urlArr, _type) { 
    the let that = the this ; 
    wx.getImageInfo ({ 
        the src: urlArr [_type], @ applet code address returned by the server with Parameter 
        Success: function (RES) {
             // res.path network is a local address of the picture 
            IF (_type === 0) { // product image 
                that.setData ({ 
                    localImageUrl: res.path, 
                }) 
                that.getImginfo (urlArr, . 1 ) 
            } the else { 
                that. setData ({ //Two-dimensional code 
                    localCodeUrl: res.path, 
                    loadType: to true , 
                }) 
                // create canvas pictures 
                that.createNewImg (); 
            } 
        }, 
        Fail: function (RES) {
             // failed callback 
            console.log ( 'error -res' , _type, RES) 
        } 
    }); 
},

 

// Draw Canvas 
createNewImg: function () { 
    the let the _width = the this .data._width, 
        _heigth = the this .data._heigth; // screen width and height 

    the let imgHeigth = the this .data.swiperHeight, // original picture height 
        scale = ( the _width - 40) / the _width, // reduction ratio 
        that = the this ; 
    the let ImgH = imgHeigth * Scale; // when drawing pictures show highly   
    the let wx.createCanvasContext CTX = ( 'MyCanvas' );
     // draw the background 
    ctx.setFillStyle ( " #fff " );
    ctx.fillRect ( 0, 0, the _width - 40, 160. ImgH + );
     // draw a picture 
    ctx.drawImage ( the this .data.localImageUrl, 10, 10, the _width - 60 , ImgH); 

    // draw the title 
    ctx.setFontSize ( 18 is ); 
    ctx.setFillStyle ( '# 333' ); 

    the let txtWidth = the _width - 60 + 30 - 100 - 50; // character width 

    // trade name written on two lines up little LOW, but the idea is to 
    let title = the this .data.goods.title; // trade name of 
    the let title2; // tradename 
    IF (title.length> 10 ) { 
        title2 = title.slice (10, title.length);
        title = title.slice(0, 10);
    }
    if (title2.length > 10) {
        title2 = title2.slice(0, 9) + ' ...';
    }
    ctx.fillText(title, 10, imgH + 40, txtWidth);
    ctx.fillText(title2, 10, imgH + 70, txtWidth);
    // 绘制价格 '￥'
    ctx.setFontSize(14);
    ctx.setFillStyle('#d2aa68');
    ctx.fillText('￥', 10, imgH + 110, txtWidth);
    // 绘制价格
    ctx.setFontSize(24);
    ctx.fillText(this.data.goods.promotion_price, 26 is, ImgH + 110 , txtWidth);
     // draw RACK 
    ctx.setFontSize (14 ); 
    ctx.setFillStyle ( '# 666' ); 
    ctx.fillText ( `RACK {$ ¥ the this . } `data.goods.price, 115, 110 + ImgH , txtWidth); 

    // draw a two-dimensional code 
    ctx.drawImage ( the this .data.localCodeUrl, the _width - 80 + 80 - 150, 20 is ImgH +, 100, 100 );
     // display drawing 
    ctx.draw (); 

    // will generate a good image to be saved locally to be delayed for a period consuming rendering 
    the setTimeout ( function () { 
        wx.canvasToTempFilePath ({ 
            canvasId: 'MyCanvas' ,
            success: function(res) {
                var tempFilePath = res.tempFilePath;
                that.setData({
                    loadImagePath: tempFilePath,
                });
            },
            fail: function(res) {
                console.log(res);
            }
        });
    }, 500);
}

 

// Click Save to album 
saveImg: function () { 
    wx.saveImageToPhotosAlbum ({ 
        filePath: the this .data.loadImagePath, 
        Success (RES) { 
            console.log ( 'RES' , RES); 
            wx.showToast ({ 
                title: 'has save the album ' , 
                icon: ' Success' , 
                DURATION: 3000 
            }) 
        } 
    }) 
}

 

// Close poster pop 
closePos: function () {
     the this .setData ({ 
        canvasType: to false 
    }); 
}

 

 Page code section

<view class='poster' wx:if="{{canvasType}}">
  <canvas class='canvas' style='height:{{canvasH}}px;width:{{canvasW}}px;' canvas-id="mycanvas" />

  <cover-view class='opt' hidden='{{!loadType}}'>
    <cover-view class='cont'>
      <cover-view class='item' bindtap='saveImg'>
        <cover-image  class='ico' src='{{server_img_url}}ico/icon_download.png'></cover-image>
        <cover-view>保存到相册</cover-view>
      </cover-view>
     
    </cover-view>
  </cover-view>
  <cover-view class='btn-box' hidden='{{!loadType}}'>
    <button bindtap='closePos' class='btn'>取消</button>
  </cover-view>
</view>

<view class="btn-box">
    <button class='m-btn-share' bindtap='getSysInfo'>生成图片</button>
    <button class='m-btn' open-type='share'>call友来抢</button>
</view>