uniapp绘制海报（h5）

[nitroge]

uniapp绘制海报

注意项：

• 网络图片请求头部需要设置允许跨域，或者把图片导成base64格式，否则导出画布失败

  
  <template>
  <view class="share-poster">
  <MsbNavbar title="长按图片保存"></MsbNavbar>
  <view class="share-poster-wrap">
  <image class="share-poster-wrap__image" :src="tempFilePath"></image>
  <view id="canvasQrcode" class="canvas-qrcode"></view>
  <canvas canvas-id="canvasPoster" id="canvasPoster"></canvas>
  </view>
  <view class="share-poster-btns flex flex-center flex-middle">
  <view class="share-poster-btns__item">
  <u-button type="error" shape="circle" @click="onCopy"
  复制链接</u-button

  <!-- TODO：利用a标签下载不知道保存到哪去了 -->
  <view v-if="false" class="share-poster-btns__item">
    <u-button type="error" shape="circle" @click="onSave"
      >保存图片</u-button
    >
  </view>
</view>

[nitroge]

close