小程序canvas商品海报绘制

小程序canvas海报绘制

1.html

绘制图片的元素
<view class="canvas-box">
	<canvas  style="width: 300px;height: 440px;position:fixed;" canvas-id="mycanvas"/>
</view> 

展示海报的元素
<view class="canvas_img" wx:if="{{sanvas_img_show}}">
	<view bindtap="none_post" style="float:right;color:#ccc; font-size:30rpx;margin:20rpx 30rpx 0 0">取消</view>
<view class='imagePathBox'>
  <image src="{{imagePath}}" class='shengcheng'></image>
</view>
	<button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈		  </button>
</view>

2.js

//生成海报
1、获取二维码
 make_post(){
	var that = this;
	//获取商品二维码
	 wx.request({
  		url: api_url + 'goods/creat_code',
 		method: 'POST',
  		header: app.data.header,
	      data: {
	        uuid:app.data.uuid,
	        goods_id: that.data.goods_info.goods_id
	      },
	      success (res) {
	        var code_img = res.data.data;
	        console.log(code_img);
	        setTimeout(function () {
	          that.createNewImg(code_img);
	        }, 1000) 
	      }
	    })
	 },
2、把图片保存到本地零时文件	
createNewImg: function (code_img) {
  var code_img = code_img;
  var that = this;
  var goods_info = this.data.goods_info;
  var store_info = wx.getStorageSync('store_info')
  var path = goods_info.img.url;
  var store_img  = store_info.seller_logo;
  var goods_img_d ;
  var store_img_d ;
  // var goods_img_d = '/images/goods/empty.png'
  // var store_img_d = '/images/goods/empty.png';
  wx.downloadFile({
    url: code_img,
    success: function (res) {
      //二维码图
      var code_img_d = res.tempFilePath;
      wx.downloadFile({
        url: store_img,
        success: function (res3) {
          //店铺图片
          store_img_d = res3.tempFilePath;
          wx.downloadFile({
            url: path,
            success: function (res) {
              //商品图片
              goods_img_d = res.tempFilePath 
              //画图
              that.drawImg(code_img_d,store_img_d,goods_img_d);
            },
            fail(){
              that.drawImg(code_img_d,store_img_d);
            }
          })
        },
        fail(){
          that.drawImg(code_img_d);
        }
      })
    },
    fail(){
      that.drawImg();
    }
  })
  
  },
  //画图
  3、绘制图片
  drawImg: function (code_img='/images/goods/empty.png',store_img_d='/images/goods/empty.png', goods_img_d='/images/goods/empty.png') {
    var that = this;
    var goods_info = that.data.goods_info;
    var store_info = wx.getStorageSync('store_info')
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 300, 440)//填充已填充矩形
    //绘制小程序头像和名字
    var store_name = store_info.seller_name;
    context.drawImage(store_img_d, 25, 20, 40, 40);
    context.setFontSize(16);
    context.setFillStyle('#000');
    context.fillText(store_name, 70, 40);
    context.stroke();
    //商品图片绘制
    context.drawImage(goods_img_d, 30, 70, 240, 240)
    //绘制名字
    var goods_name = goods_info.goods_name;
    goods_name = goods_name.substring(0,7) + '...'
    context.setFontSize(16);
    context.setFillStyle('#000');
    context.fillText(goods_name, 25, 340);
    context.stroke();
    //价格绘制
    var goods_price = goods_info.shop_price
    context.setFontSize(16);
    context.setFillStyle('red');
    context.fillText(goods_price, 25, 370);
    context.stroke();
    context.setFontSize(12);
    context.setFillStyle('#000');
    context.setTextAlign('left');
    context.fillText("长按二维码查看详情", 25, 400);
    context.stroke();
    //绘制产品二维码
    context.drawImage(code_img, 210, 332, 75, 75);
    context.draw();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            // sanvas_img_show:1
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
      }, 200);
  },

3、php生成产品二维码

class code {
    public function get_code($request) {
    	
        $qrcode_name = "goods_".$goods_id.'.png';
        $qrcode_url = $_SERVER['DOCUMENT_ROOT'].'/content/uploads/data/qrcodes/goods/'.$qrcode_name;
        $code_url = '/data/qrcodes/goods/'.$qrcode_name;
        if(file_exists($code_url)){
            return  RC_Upload::upload_url($code_url);
        }

        $APPID = '';
        $APPSECRET = '';
        $access_token = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$APPID&secret=$APPSECRET";
        $_SESSION['access_token'] = "";
        $_SESSION['expires_in'] = 0;
        $a_token = '';
        if(!isset($_SESSION['access_token']) || (isset($_SESSION['expires_in']) && time() > $_SESSION['expires_in']))
        {
            $json = $this->httpRequest( $access_token );
            $json = json_decode($json,true);
            $_SESSION['access_token'] = $json['access_token'];
            $_SESSION['expires_in'] = time()+7200;
            $a_token = $json["access_token"];
        } else{
            $a_token =  $_SESSION["access_token"];
        }
        $store_id = $app_info['shop_id'];
        $qcode ="https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=$a_token";
        $param = json_encode(array("page"=>"pages/ecjia-goods/ecjia",'scene'=>$goods_id.'-'.$store_id));
        $result = $this->httpRequest( $qcode, $param,'POST');
        file_put_contents($qrcode_url, $result);
        return  RC_Upload::upload_url($code_url);
	}

	//获取网页信息请求
    protected function httpRequest( $url, $post_data = '',$method ='GET' ) {
        $options = array(
            'http' => array(
                'method'  => $method,
                'header'  => 'Content-type:application/json',
                //header 需要设置为 JSON
                'content' => $post_data,
                'timeout' => 60
                //超时时间
            )
        );
        $context = stream_context_create( $options );
        $result = file_get_contents( $url, false, $context );
        return $result;
    }

}