原生微信小程序使用canvas生成收款码图片

需求：需要的收款码可以保存下来，使用直接使用canvas canvas进行绘制生成即可，h5使用html2canvas将dom元素直接转为图片即可

效果图：

完整代码:

wxml文件：

• 定义了一个 view 元素作为要转换的 DOM 元素，以及一个按钮用于触发转换操作。
• 定义了一个 canvas 元素，用于绘制 DOM 元素内容。
• 定义一个 image 元素，用于显示生成的图片。

<!--shared_store/pages/collectionCode/collectionCode.wxml-->
<view class="code_box">
  <view class="collectionCode" id="shareView">
  <image class="check_img" mode="widthFix" src="{
  {http_host}}/shared_store/web/static/images/check.png" alt="" ></image>
  <view class="check_text">支持使用微信到店扫码买单</view>
  <view class="can_box">
    <image style="width:400rpx;height:400rpx;;margin-top: 30rpx;" src="{
  {qr_code_img}}" mode="widthFix"></image>
    <view class="store_name">{
  {shop_name}}</view>
    <view class="software_pay">
      <image class="wechat_img" mode="widthFix" src="{
  {http_host}}/shared_store/web/static/images/wechat_pay.png" alt="" ></image>
      <!-- <image class="check_img" mode="widthFix" src="{
  {http_host}}/shared_store/web/static/images/alipay.png" alt="" ></image> -->
    </view>
  </view>
</view>
<view class="save_btn" bindtap="saveFun">
  <view class="btns">保存到相册</view>
</view>
</view>

<canvas canvas-id="my-canvas" style="width: {
  {can_width}}px; height: {
  {can_height}}px;"></canvas>
<image mode="widthFix" wx:if="{
  {false}}" src="{
  {imagePath}}" style="width:{
  {can_width}}px; height:{
  {can_height}}px"></image>

 wxss

/* shared_store/pages/collectionCode/collectionCode.wxss */
page {
  overflow: hidden;
  
}
view{
  box-sizing: border-box;
}

.code_box{
  width: 100%;
  height: 100vh;
  background-color: #112E98; 
  position: relative;
}

.collectionCode {
  padding: 120rpx 40rpx;
  width: 100%;
  /* height: 100vh; */
  /* padding-top: 256rpx; */
}

.collectionCode>view {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 20rpx;
  /* padding: 50rpx; */
  font-size: 28rpx;
  color: #333;
  text-align: center;
  /* display: flex;
  flex-direction: column;
  al