移动端使用video第一帧画面预览， canvas.toDataURL("image/png");获取不到地址为空，在pc端可以获取得到

[Z_pigeon]

这是网上的代码

 <script type="text/javascript">
   (function(){
       var video, output;
       var scale = 0.8;
       var initialize = function() {
            output = document.getElementById("output");
            video = document.getElementById("video");
            video.addEventListener('loadeddata',captureImage);
       };
       var captureImage = function() {
            var imga = document.createElement("img");
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
          
            // 设置动态添加的元素的样式
            imga.className='all';
            imga.crossOrigin='anonymous';
            // alert(canvas.toDataURL("image/png"));
            imga.src = canvas.toDataURL("image/png");
            video.poster=imga.src;
            output.appendChild(imga);           
       };
       initialize();
   })();

 <video src="../source/mov_bbb.mp4"  class="viedoType"   preload="load" controls id="video">
      </video> 
<div id="output" style="height:200px"></div>

在pc端是imga.src可以拿到第一帧图片地址，但是到了移动端的时候地址是空的，求解怎么处理

[Z_pigeon]

可能是写错代码的原因，移动端图片地址已经可以拿到，但是还是没有在移动端显示。换了种思维，用户上传视频的时候把第一帧的地址穿给服务器，存储转化成图片，然后再以图片地址的形式传回前端。base64格式的地址在服务器是可以转为图片的

[123KangKang]

在前端用canvas画一张图片，在pc端可以显示出来，但是手机就不可以，怎么解决呀！！！

[love_yzm]

我也遇到同样的问题，求怎么解决

[正在成长的程序猿]

这个问题解决了吗？我也碰到这个问题了，PC可以，移动不可以，找到一个解决办法 data:后面应该加上image/png才行，所以代码需要改成这样： const base64 = wx.arrayBufferToBase64(res.data); that.setData({ QrCodeUrl: "data:image/png;base64," + base64 }); 但是我不知道这个该怎么改，能有大佬给解释一下吗？

[正在成长的程序猿]

这是代码 //第一帧预览图 var galleryImg2; var output; var scale = 0.8; var initialize = function() { output = document.getElementById("output"); galleryImg2 = document.getElementById("galleryImg2"); galleryImg2.addEventListener('loadeddata',captureImage); }; var captureImage = function() { var canvas = document.createElement("canvas"); canvas.width = galleryImg2.videoWidth * scale; canvas.height = galleryImg2.videoHeight * scale; canvas.getContext('2d').drawImage(galleryImg2, 0, 0, canvas.width, canvas.height); var img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); img.width = 79; img.height = 79; output.appendChild(img); }; initialize();