1***@qq.com
1***@qq.com
  • 发布:2023-05-11 10:29
  • 更新:2023-05-11 16:37
  • 阅读:207

【报Bug】uni.canvasToTempFilePath输出的图片不一致

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版 22H2 19045.2965

手机系统: 全部

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: CLI

CLI版本号: 3.7.9

测试过的手机:

ip8(iOS15.1)、小米11u(miui 14.0.6) [attach]112375[/attach]

示例代码:
<template>  
  <view>  
    <!--    class="fixed -left-5000px -top-3000px"-->  
    <canvas  
      id="shareCanvas"  
      ref="shareCanvas"  
      :hidpi="false"  
      :style="canvasStyle"  
      canvas-id="shareCanvas"  
    ></canvas>  
    <u-popup  
      :show="show"  
      :safe-area-inset-bottom="false"  
      bg-color="transparent"  
      @close="close"  
    >  
      <u-toast ref="uToast"></u-toast>  
      <view class="h-100vh w-full flex flex-col items-center justify-between leading-none">  
        <view class="flex-1 pt-200rpx overflow-auto pb-30rpx">  
          <image  
            :src="posterUrl"  
            class="block w-582rpx h-1036rpx"  
          />  
        </view>  
        <view class="action-container padding-safe-bottom w-full h-280rpx rounded-t-40rpx bg-#F6F6F6">  
          <view class="f-center gap-x-144rpx h-180rpx u-border-bottom">  
            <!--            #ifdef APP-PLUS-->  
            <view class="w-122rpx flex flex-col items-center">  
              <image  
                class="w-72rpx h-72rpx"  
                src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-wechat.png"  
              ></image>  
              <view class="share-text">微信好友</view>  
            </view>  
            <view class="w-122rpx flex flex-col items-center">  
              <image  
                class="w-72rpx h-72rpx"  
                src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-moment.png"  
              >  
              </image>  
              <view class="share-text">朋友圈</view>  
            </view>  
            <!--            #endif-->  

            <!--            #ifdef MP-WEIXIN-->  
            <view class="w-122rpx flex flex-col items-center relative">  
              <button  
                class="absolute top-0 left-0 bottom-0 right-0 bg-transparent border-none opacity-0"  
                open-type="share"  
              >  
              </button>  
              <image  
                class="w-72rpx h-72rpx"  
                src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-wechat.png"  
              ></image>  
              <view class="share-text">微信好友</view>  
            </view>  
            <view class="w-122rpx flex flex-col items-center">  
              <image  
                class="w-72rpx h-72rpx"  
                src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-moment.png"  
              >  
              </image>  
              <view class="share-text">朋友圈</view>  
            </view>  
            <!--            #endif-->  
            <view  
              class="w-122rpx flex flex-col items-center"  
              @click="saveImage"  
            >  
              <image  
                class="w-72rpx h-72rpx"  
                src="https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023414/icon-share-download.png"  
              ></image>  
              <view class="share-text">保存至相册</view>  
            </view>  
          </view>  
          <view  
            class="h-100rpx f-center text-32 text-#606266 hover:opacity-80"  
            @click="close"  
          >  
            关闭  
          </view>  
        </view>  
      </view>  
    </u-popup>  
  </view>  
</template>  

<script>  
  import { delay } from '@/utils'  
  const BG_URL = 'https://jr-common-1302914566.cos.ap-guangzhou.myqcloud.com/front-end-common/2023417/job-share-bg.png'  

  const ratio = 2  
  const CANVAS_OPTIONS = {  
    originWidth: 582,  
    originHeight: 1036,  
    height: 1036 * ratio,  
    width: 582 * ratio  
  }  
  const EVENT_NAMES = {  
    updateShow: 'update:show'  
  }  
  export default {  
    name: 'JrJobShare',  
    components: {},  
    props: {  
      show: {  
        type: Boolean,  
        default: false  
      }  
    },  
    data() {  
      return {  
        CANVAS_OPTIONS,  
        posterUrl: '',  
        context: null,  
        bgUrl: '',  
        canvasStyle: `width:${CANVAS_OPTIONS.width}px;height:${CANVAS_OPTIONS.height}px;`,  
        showCanvas: true  
      }  
    },  
    async mounted() {  
      this.context = uni.createCanvasContext('shareCanvas', this)  
    },  
    methods: {  
      saveImage() {  
        uni.saveImageToPhotosAlbum({  
          filePath: this.posterUrl,  
          success: () => {  
            uni.showToast({  
              title: '保存成功,快去分享给朋友吧',  
              icon: 'none',  
              duration: 2000  
            })  
          }  
        })  
      },  
      async initialize() {  
        this.showCanvas = true  
        this.showLoading()  
        await Promise.all([this.downloadBg()]).catch(() => this.hideLoading)  
        await this.drawPoster()  
        this.hideLoading()  
      },  
      showLoading() {  
        if (this.show) {  
          uni.showLoading({  
            title: '生成中',  
            mask: true  
          })  
        }  
      },  
      hideLoading() {  
        if (this.show) {  
          uni.hideLoading()  
        }  
      },  
      async drawPoster() {  
        await delay(100)  
        this.context = uni.createCanvasContext('shareCanvas', this)  
        const ctx = this.context  
        const { bgUrl } = this  
        // 背景  
        ctx.drawImage(bgUrl, 0, 0, CANVAS_OPTIONS.width, CANVAS_OPTIONS.height)  
        ctx.draw(false, async ({ errMsg }) => {  
          await delay(1500)  
          if (errMsg === 'drawCanvas:ok') {  
            uni.canvasToTempFilePath(  
              {  
                canvasId: 'shareCanvas',  
                destWidth: CANVAS_OPTIONS.originWidth,  
                destHeight: CANVAS_OPTIONS.originHeight,  
                success: ({ tempFilePath }) => {  
                  console.log('tempFilePath', tempFilePath)  
                  this.posterUrl = tempFilePath  
                },  
                fail: (err) => {  
                  console.log(err)  
                },  
                complete: () => {}  
              },  
              this  
            )  
            return  
          }  
          console.log(errMsg)  
          uni.showToast({  
            icon: 'none',  
            title: '分享海报生成失败,请重试',  
            duration: 3000  
          })  
        })  
      },  
      async downloadBg() {  
        const bgUrl = await this.getImgInfo(BG_URL)  
        this.qrcodeUrl = bgUrl  
        this.bgUrl = bgUrl  
      },  
      getImgInfo(url) {  
        return new Promise((resolve, reject) => {  
          uni.getImageInfo({  
            src: url,  
            success: (res) => resolve(res.path),  
            fail: () => reject()  
          })  
        })  
      },  
      close() {  
        this.showCanvas = false  
        this.$emit(EVENT_NAMES.updateShow, false)  
      }  
    }  
  }  
</script>  

<style scoped lang="scss">  
  .action-container {  
  }  
  .share-text {  
    font-size: 24rpx;  
    margin-top: 24rpx;  
  }  
</style>  

操作步骤:

点击分享

预期结果:

uni.canvasToTempFilePath输出的图片一致

实际结果:

app端和小程序不一致

bug描述:

题外话,BUG 描述添加不了图片,点击插入跑到“测试过的手机”里面去了

写海报输出,小程序和app输出不一致

附件1为正常输出-小程序

附件2为热更新后第一次触发绘制并输出图片,输出的内容居然在左上角

附件3为关闭第一次输出的图片窗口后再次触发,变形了

2023-05-11 10:29 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

找到问题了,父页面有个同id命名的canvas组件,canvasToTempFilePath传的是组件的this,竟然获取的是父页面的同名canvas,醉了

piaoyi_UI

piaoyi_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

我最近测试这个,发现小程序端返回的是临时路径,h5端返回的是base64

要回复问题请先登录注册