b***@qq.com
b***@qq.com
  • 发布:2023-06-16 14:25
  • 更新:2023-06-16 16:25
  • 阅读:352

【报Bug】CanvasContext.drawImage绘制视频资源不生效

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 13.3.1 (a) (22E772610a)

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

第三方开发者工具版本号: RC1.06.2304191

基础库版本号: 8.03及以上

项目创建方式: HBuilderX

操作步骤:

详见bug描述

预期结果:

详见bug描述

实际结果:

CanvasContext.drawImage绘制视频资源不生效,其他详见bug描述

bug描述:

我们有一个需求需要实现类似抖音视频那种视频播放时,背景是同步播放的高斯模糊过的画面,然后是微信小程序端,相关帖子非常少,能找到的方法都试了但是都不生效,费尽心机想各种关键词搜索,看到个别疑似官方人员的回复说这个API是用来绘制图片的,但是js本身是支持绘制视频源的啊

请问现在2023年CanvasContext.drawImage支持视频资源绘制吗?

如果支持的话有相关帖子推荐参考一下吗?微信小程序端哦
毕竟也可能是我写的有问题,但是demo试了很多,写的乱七八糟,不贴了。

如果不支持的话,近期会考虑支持吗?

期待回复~非常感谢~

2023-06-16 14:25 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

可以换种写法试试 你用css中的 filter: blur()属性 将video模糊处理 一个video静音做背景 一个video播放

  • b***@qq.com (作者)

    可行可行,再次感谢提供思路

    2023-06-19 09:13

Diligent_UI

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

提供一下代码截图

  • b***@qq.com (作者)

    因为vue3版没有this的问题,create相关API官方又没有给出示例代码,咋写的都有,我裁来裁去的也乱七八糟不想贴啊

    2023-06-19 09:02

爱豆豆

爱豆豆 - 办法总比困难多

<video style="opacity: 0.6;  
                -webkit-filter: blur(20px);  
                -moz-filter: blur(20px);  
                -o-filter: blur(20px);  
                -ms-filter: blur(20px);  
                filter: blur(20px);  
                width: 800px;" muted autoplay src="http://xxxxxxxxxxxxxx.mp4"></video>
  • 爱豆豆

    用这个作为视频模糊背景

    2023-06-16 16:31

  • b***@qq.com (作者)

    啊,是哦,放两个video标签一个做背景一个做内容,谢谢!

    2023-06-19 08:55

要回复问题请先登录注册