H5页面中如何使用html5-canvas

2024-10-26 技术教程

小编给大家分享一下H5页面中如何使用html5-canvas，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

H5页面中使用html5-canvas总结

html5canvas 插件实现的功能是，将dom节点的内容复制到一个动态创建的<canvas>中，而通过 canvas 对象就可以很方便地将画布的内容转成图片。

github直达：html2canvas

使用方式

html2canvas(domNode,options).then(function(canvas){varimg=document.createElement('img');img.src=canvas.toDataURL();//成功将原生domNode转成img});在H5页面中使用

<scriptsrc="js/html2canvas.min.js"></script>//vardomNode=document.getElementById('xxId');html2canvas(domNode,{width:Math.floor(domNode.clientWidth),height:Math.floor(domNode.clientHeight),scale:2}).then(function(canvas){//console.log(canvas);//document.body.appendChild(canvas);varimg=document.createElement('img');img.src=canvas.toDataURL();img.setAttribute('id','xxxImage');//将img展示到页面上//prependChild(img,domNode);});

参数解释：

width：指定动态创建的 canvas 的 style 宽度，建议和 domNode 的实际宽度一致；

height: 指定动态创建的 canvas 的 style 高度，建议和 domNode 的实际高度一致；

scale: 缩放比，笔者建议设置为2，这样相当于将 canvas 画布的绘图宽度/高度扩大为style宽度/高度的2倍。这样绘制出来的图片比较清晰，避免出现模糊的问题。

注意事项

1、实测IOS上出现调用 html5canvas 无反应，Android 机型正常。

2、domNode 中所有图片使用<img>标签引入，不要用 background-image 方式。否则可能图片不清晰。

3、跨域图片不显示的问题，增加配置参数{ allowTaint: true, useCORS: true }。

4、png 图片透明度丢失的问题，增加配置参数{ backgroundColor: "transparent" }。

5、不要使用<br/>标签进行文字换行，使用<p>或<div>标签改写。

6、生成部分图片的问题，可能是调用 html5canvas 方法的时候，domNode 节点本身还没有渲染完毕（比如 domNode 节点本身正在参与一个 zoom 动效），加个适当的延时即可。

7、生成图片底部有留白的问题，这个是 domNode 中图片底部本身就有留白，设置图片样式 display:block/inline-block 即可。