html2canvas在ios上截屏样式不识别

Posted 2023-04-27

参考技术A

1.最近在做移动端开发，框架是vue，一产品需求是，后台返回数据，通过qrcode.js(代码比较简单，百度上已经很多了)生成二维码，然后通过html2canvas，将html元素转化为canvas,通过 canvas.toDataURL() 方法转化为base64，二进制流的图片，显示在页面上，因为微信内置浏览器不支持下载（可能是我不会，谁实现了可以教一下我)，需要用户触屏手动保存图片。下面贴出部分代码

 

2.

<template>
<section id="section">
<p>当前积分<span>365</span></p>
<p>参与项目数量<span>12</span></p>
<p>募捐金额<span>45678</span>元</p>
<p>荣誉等级<span>海绵宝宝</span></p>
<div id="qrcode">
</div>
</section>
<div id='photo'>
<span>长按图片保存和分享</span>
</div>
<button @click="saveImg">生成图片</button>
</template>
<script>　　export default
methods:
saveImg()
var shareContent = document.getElementById("section");
html2canvas( shareContent,
onrendered: function(canvas)
var img = new Image();
img.src = canvas.toDataURL() ;
document.getElementById("photo").appendChild(img);


)

</script>

 

3.当然前提是先引入html2canvas文件，我直接在index.html 引入CDN 地址是 

　　

<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>

 

不要问我为什么不用最新 0.5.0版本，网上有人说坑比较多，我项目赶进度，没来得及去踩坑，你们想尝试也可以玩玩。

 

4.然而，通过上述代码，PC端，包括开发者工具均可显示生成的图片，移动端安卓系统也能正常显示和保存。然而，坑坑的ios图片区域一片空白；于是，本人开始漫长的百度之旅

 

5.说法1：ios显示base64图片，需要去除格式前缀

　我们通过控制台，可以看到canvas.toDataURL() 出来的格式，img src 可以直接显示 "data:image/png;base64,iVBORw0KGgoAAAANSU.....==="格式的图片，但是ios需要去除　data:image/png;base64　前缀，于是我通过以下判定，当是IOS系统时，去除前缀

　　　

　var u = navigator.userAgent, app = navigator.appVersion;
var isandroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g　　　　var isIOS = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端　　　　if (isAndroid)
//这个是安卓操作系统　　　　　　mg.src = canvas.toDataURL() ;

if (isIOS)
//这个是ios操作系统　　　　　　mg.src = canvas.toDataURL() .replace("data:image/png;base64,","");

 

 然而开发者工具调为IOS手机，也出现系统报错，可以发现，去除前缀，浏览器会自动添加地址前缀。所以，这种解决办法失败。接着来

 

 

 

6.说法2，首先在页面添加img,通过给src赋值，完成，而不是appendChild

　　

　

<div id='photo'>
<span>长按图片保存和分享</span>
<img src=""  id="img">
</div>　　..

html2canvas( shareContent,
onrendered: function(canvas)
document.getElementById("img").src = canvas.toDataURL() ;

 

　　当然，结果依旧是空白一片 

 

7.说法3，无效

 　　

document.getElementById("img").src = canvas.toDataURL() .replace("image/png", "image/octet-stream") ;

 

 

8.说法4，blob格式生成http URL地址格式显示

　和说法1有点相关，当去掉IMG格式前缀，SRC会添加域名，显示地址，那我们直接显示地址行不行，有人通过后台完成，但是，太过复杂。尝试blob格式生成http URL？

　　

function dataURLtoBlob(dataurl)
var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--)
u8arr[n] = bstr.charCodeAt(n);

return new Blob([u8arr], type:mime);

let dataUrl = dataURLtoBlob(canvas.toDataURL()) ;
document.getElementById("img").src = URL.createObjectURL(dataUrl);

 

这样，IMG的SRC显示就不是base64格式，而是http格式的URL，但是，ios依然无法显示图片

8.做到这里，我产生了让后端帮助的念头，但随后放弃了，于是开始整理思路，我一直觉得是ios不支持base64格式图片，网上也有人说是ios11无法显示html2canvas.然而通过第四种借助http url的方法，还是没有成功，于是我开始思考是不是其他地方出现的问题。搜索了很多文章，忽然一个说法让我觉得很有可能是解决办法，那就是，ios系统无法动态给img src赋值，可以通过div 显示背景的方式显示图片。但是，即使可以成功，也完不成我这个项目功能，因为作为背景图的话，用户无法触屏保存图片...而，这里，就体现了框架相对原生JS的好处，我可以通过v-bind绑定src 再给data赋值的方式。激动的我赶紧尝试。

<template>
<section id="section">
<p>当前积分<span>365</span></p>
<p>参与项目数量<span>12</span></p>
<p>募捐金额<span>45678</span>元</p>
<p>荣誉等级<span>海绵宝宝</span></p>
<div id="qrcode">
</div>
</section>
<div id='photo'>
<span>长按图片保存和分享</span>
<img :src="url">
</div>
<button @click="saveImg">生成图片</button>
</template>
<script>　　export default
data()
return
url:""　　　　　　
,
methods:
saveImg()
var shareContent = document.getElementById("section");
html2canvas( shareContent,
onrendered: function(canvas)
this.url = canvas.toDataURL() ;

)

</script>

 

 

大功告成！嗯...最后的原因只是因为ios不支持直接给img src赋值，
当然，还可以优化，比如加入截屏声音。

　

　//添加快门声音　　var audio = document.createElement("audio");
audio.src = "/static/1374.wav";
audio.autoplay = "autoplay" ;
photo.appendChild(audio);
setTimeout(()=>
photo.removeChild(audio);
,2000);

mac --snip 滚动截屏

1.snip 下载配置；https://jingyan.baidu.com/article/fec4bce2458d03f2618d8b8e.html

2.mac的火狐浏览器好像不支持，必须在sofari 可以，当需要滚动截屏的时候，鼠标移上去，就会识别区域，然后点击，再选择保存就可以了。

注意：如果识别区域不能滚动截屏，1.更换浏览器。

Mac 的finder等都可以使用snip 滚动截屏