H5页面中如何使用html5-canvas

发布时间:2022-02-22 13:46:59 作者:小新
来源:亿速云 阅读:158

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

H5页面中使用html5-canvas总结

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

github直达:html2canvas

使用方式
html2canvas(domNode, options).then(function(canvas){
    var img = document.createElement('img');
    img.src = canvas.toDataURL();
    // 成功将原生domNode转成img
});

在H5页面中使用

<script src="js/html2canvas.min.js"></script>
// var domNode = 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);
    var img = document.createElement('img');
    img.src = canvas.toDataURL();
    img.setAttribute('id', 'xxxImage');
    // 将img展示到页面上
    // prependChild(img, domNode);
});

参数解释:

注意事项

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 即可。

看完了这篇文章,相信你对“H5页面中如何使用html5-canvas”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 怎么_如何制作h5页面?
  2. 怎样在H5页面中调用APP

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html html5 canvas

上一篇:如何在本地开发Angular Schematics

下一篇:css通配符选择器怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》