博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html2canvas在vue下的巨坑
阅读量:7036 次
发布时间:2019-06-28

本文共 654 字,大约阅读时间需要 2 分钟。

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

html

Hello world!

jshtml2canvas(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目录或者同域下的文件地址

转载地址:http://ogyal.baihongyu.com/

你可能感兴趣的文章
java如何将char类型的数字转换成int型的数字,而不是Ascii
查看>>
Javascript面向对象(封装、继承)
查看>>
轮播图代码实现
查看>>
ElasticSearch(6.2.2)的java API官方文档的总结 (三)
查看>>
Python学习——小知识点
查看>>
Android 面试精华题目总结
查看>>
笨蛋的难题(二)
查看>>
【纪中集训2019.3.25】芬威克树
查看>>
iOS---观察者模式之--->KVO
查看>>
04.Curator Leader选举
查看>>
How to attach multiple files in the Send Mail Task in SSIS
查看>>
leetcode------Validate Binary Search Tree
查看>>
android 媒体的uri,安卓 - 从相对路径+显示名称中获取媒体的URI或ID
查看>>
p10可以适配鸿蒙吗,鸿蒙系统支持旧机型吗
查看>>
新增标签 html知识,互联网常识:html5有哪些新增标签
查看>>
怎么设置html编译报错,doctype html编译出错,提示unexpected character D,这是怎么回事呀?...
查看>>
数组转DataTable
查看>>
scrum之旅读书笔记
查看>>
PIX8.0的LAN-to-LAN IPSEC***反向路由注入测试
查看>>
实现F5后端服务器访问
查看>>