资讯专栏INFORMATION COLUMN

html2canvas在vue下的巨坑

20171112 / 1598人阅读

摘要:公司有个需求就是要在前端生成图片首先想到的是用生成图片,自己画这也太耗时间了吧后面在上一查有个的框架可以用这里附上地址使用起来也特别简单,官网是这么描述的如果你要配置一些参数可以在传入的后面进行传参官网文档可查官网文档我自己的工程环境是会

公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片,自己画这也太耗时间了吧!后面在npm上一查有个html2canvas的框架可以用这里附上地址
html2canvas
使用起来也特别简单,官网是这么描述的

html

Hello world!

js html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });

html2canvas(document.querySelector("#capture")  {
    async: true
}).then(canvas => {
    document.body.appendChild(canvas)
});

如果你要配置一些参数可以在传入dom的后面进行 object 传参 官网文档可查
官网文档
我自己的工程环境是vue-cli会进行webpack打包在ios下运行的时候会出现错误因为我要生成一张图片是的canvas api 是 toDataURL
这错误在ios一直显示是权限问题 在ios 和safari 上的问题是一致的 原因是canva绘制dom上的图片的时候是 base64的格式(webpack会对asstes目录下的图片进行压缩)花费了几个小时才解决这个问题,感觉很不值所以分享给大家希望大家别踩进去了!解决方法是可以 static目录或者同域下的文件地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97286.html

相关文章

  • html2canvasvue下的巨坑

    摘要:公司有个需求就是要在前端生成图片首先想到的是用生成图片,自己画这也太耗时间了吧后面在上一查有个的框架可以用这里附上地址使用起来也特别简单,官网是这么描述的如果你要配置一些参数可以在传入的后面进行传参官网文档可查官网文档我自己的工程环境是会 公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片,自己画这也太耗时间了吧!后面在npm上一查有个html2canvas的框架可以用...

    raledong 评论0 收藏0
  • html2canvasvue下的巨坑

    摘要:公司有个需求就是要在前端生成图片首先想到的是用生成图片,自己画这也太耗时间了吧后面在上一查有个的框架可以用这里附上地址使用起来也特别简单,官网是这么描述的如果你要配置一些参数可以在传入的后面进行传参官网文档可查官网文档我自己的工程环境是会 公司有个需求就是要在前端生成图片首先想到的是用canvas生成图片,自己画这也太耗时间了吧!后面在npm上一查有个html2canvas的框架可以用...

    wow_worktile 评论0 收藏0
  • iframe onload事件被block的巨坑

    摘要:于是关键词求助百度,给出的答案要不说是的问题,要不是说客户端的问题,都尝试了一下,发现一点用处都没有。但是仍然有点奇怪,也是使用,后来回忆,在换百度这个链接之前杀了一次进程,应该是这个因素导致的。 写在前面 最近接手了一个古旧的项目,跟客户端、服务器端一起调一个支付相关的app内嵌H5页面,这个页面有两部分组成,主页面A加上一个最终支付页面B,B页面是通过iframe嵌入到A页面中的,...

    darryrzhong 评论0 收藏0
  • vue2实践(持续更新)

    摘要:记录一些小技巧和踩过的坑由于本篇文章内容太多,导致编辑器有点卡,所以新开辟了一篇实践二,后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了,但是没有绑定到上面的话,不会调用钩子函数。 记录一些小技巧和踩过的坑 由于本篇文章内容太多,导致SF编辑器有点卡,所以新开辟了一篇 vue2实践(二),后续再这里更新。 1. props 带不带冒号的区别 ...

    n7then 评论0 收藏0
  • JWT、OAuth 2.0、session 用户授权实战

    摘要:为用户提供授权以允许用户操作非公开资源,有很多种方式。具体的代码根据不同的授权方案而有所不同。使用授权原理利用来验证用户,有两种机制实现。使用来实现用户授权主要用于签发如果有将异步的签名。   在很多应用中,我们都需要向服务端提供自己的身份凭证来获得访问一些非公开资源的授权。比如在一个博客平台,我们要修改自己的博客,那么服务端要求我们能够证明 我是我 ,才会允许我们修改自己的...

    zhaot 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<