html 转canvas 分享图片；canvas合成图片 --uinapp

ch-canvas

获取源码 ：地址 https://ext.dcloud.net.cn/plugin?id=12749

canvas 合成图片 html 转 canvas 分享图片

chCanvas 有两个参数 一个是 canvas 的 id，canvasList 是数组，画布的 z-index 顺序。

chCanvas 方法	是否必填	描述头
id	必填	canvas 的 id
canvasList	必填	一个数组，按数组顺序渲染; [{type:‘image’…}]

type=image
以下参数都是必填

{
        type: 'image',
        src: '/static/bg/sky.jpg',
        width: 100,
        height: 100,
        x: 0,
        y: 0,
        isCricle: 0 //图片是否为圆形；
      },

type: ‘border’ //有圆角的矩形
以下参数都是必填

{
       type: 'border',
       lineColor: '#eee',//线条颜色
       fillColor: '#fff',//背景颜色
       radius: 10,
       rect: {
         width: 100,
         height: 100,
         x: 0,
         y: 0,
       }
     },

type=text
以下参数都是必填

{
        type: 'text',
        class: '.mflex .dec',
        innerHtml: 'xxxxxx',
        color: '#999',
        fontSize: 15,
        width: 100,
         height: 100,
         x: 0,
         y: 0,
      },

type: ‘dom’ 此类型为 html 转 canvas

{<view
      class="footer"
      id="canvas-container"
      style="
        opacity: 1;
        position: fixed;
        left: 10%;
        right: 10%;
        top: 50px;
        z-index: 2;
        opacity: 0;
      "
    >
     <view class="mflex">
        <image id="ss" src="../../static/logo.png" class="head"> </image>
        <view class="mytext">
          <text class="title">王某某 </text>
          <text class="dec">xxxxxx</text>
        </view>
        <image src="../../static/1.jpg" class="prcode"> </image>
      </view>
      <image src="../../static/1.jpg" class="mb mb1"></image>
    </view>
      },

没有明确标记的都是必填。

  {
        type: 'dom',
        parentId: '#canvas-container',
        chlildren: [{
          type: 'image',
          class: '.mflex>.head',  //唯一性
          src: '/static/logo.png',
          isCricle: 1,
        },
        {
          type: 'text',
          class: '.mflex .title',
          innerHtml: '王某某',
          color: '#000',
          fontSize: 18,
          y: 80,        //选填，若存在属性，优先级高于dom的top位置。
        }, {
          type: 'text',
          class: '.mflex .dec',
          innerHtml: 'xxxxxx',
          color: '#999',
          fontSize: 15,
          y: 100  //选填，若存在属性，优先级高于dom的top位置。
        },
        {
          type: 'image',
          class: '.mflex>.prcode',
          src: '/static/1.jpg',
          isCricle: 0,
        }, {
          type: 'image',
          class: '.mb1',
          src: '/static/1.jpg',
          isCricle: 0,
        }
        ],
      }

获取源码 ：地址 https://ext.dcloud.net.cn/plugin?id=12749