html2canvas截取图片不完整,html2canvas关于图片不能一般截取

题目

起首说说遇到了什么题目。起首有这么一个需求。须要前端依据后端传过来数据，动态的天生图片。图片中的案牍、背景图片、用户头像全部都是经由过程后端的接口猎取。然则运用 html2canvas 天生的canvas有些图片胜利的在canvas里天生了。然则有些图片无论如何都显现不出来。

官方文档

在项目内里操纵了半天未果，google了半天未果。此时有些许无望。倏忽想到了，为何不去它的官网看看呢。于是乎我在官网上看到了下面的内容。

Limitations

All the images that the script uses need to reside under the same origin for it to be able to read them without the assistance of a proxy. Similarly, if you have other canvas elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.

The script doesn’t render plugin content such as Flash or Java applets.

讲的啥呢，这里为英文不好的同砚翻译一下。英语好的能够直接看上文。也许的意义就是在html2canvas内里，是运用剧本去操纵的，也就是说运用剧本把html转换成canvas，然则有一个限定，那就是不能运用跨源的图片。假如运用了，html2canvas将不会读取资本。

这也就是为何转换出来的canvas有些图片一直是空缺的缘由。假如页面中有其他的canvas也运用了跨源的图片资本，html2canvas都不会去读取。

解决方案

对静态资本做一次转发并且在html2canvas的设置内里许可加载跨源资本,就能够了。

2018年8月1日更新

在调试的时刻console信息，发明html2canvas自带的log太多，头昏眼花的。人人能够自行设置作废掉。

html2canvas第一个参数就是你须要转换成canvas的dom节点。第二个参数接收一个对象，内里就是种种设置文件。设置项能够看这里

{ logging: false }

设置成上面如许，就能够作废html2canvas默许开启的log了。

欢迎光临个人博客

html2canvas截取图片不完整,html2canvas关于图片不能一般截取相关推荐

JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真，保存不完整的解决办法
前言最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...
H5 -- （功能）基于html2canvas实现长按网页保存为图片到本地
1.需求:长按页面中的一部分(里面有动态获取的用户昵称.头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图) 2.分析:由于有动态获取数据,需等DOM元素生成之后,再将这 ...
html2canvas将html代码生成canvas转换成图片，并且保存到本地
html2canvas将html代码生成canvas转换成图片,并且保存到本地 html2canvas 将html转换成canvas展示 convertCanvasToImage 从canvas提取为 ...
使用html2canvas保存html或者div内容为图片及自定义名称
使用html2canvas保存html或者div内容为图片及自定义名称,测试可用 <div id="first" style="width: 90%;height: ...
前端生成海报图：html2canvas 生成海报图/网页html转图片
html2canvas 生成海报图 <html><head> <title>生成海报图Demo</title> </head><bod ...
html2canvas截图图片另存并解决图片模糊问题
最近由于公司业务要求,需要完成一个HTML页面效果渲染后生成照片的功能,功能的核心是把HTML代码展现的内容转化为png或者jpg图片.接到这个任务的时候,我心里是一脸懵逼的,于是就上谷歌搜索插件,还 ...
html2canvas给图片添加水印,小程序用Canvas给图片加水印，拼接图片，制作名片
Canvas是微信小程序中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明.canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容.下面我就将 ...
js实现截取网页上特定位置的图片打印或保存
js实现截取网页上特定位置的图片打印或保存一.实现思路具体思路是创建一个宽和高都是100%的canvas,使其能够覆盖整个页面,然后根据所要截取的图片起始位置相对于canvas的位置(因为是1 ...
php图片截取后缀,PHP抓取远程图片(含不带后缀的)教程详解
一.创建项目作为演示,我们在www根目录创建项目grabimg,创建一个类GrabImage.php和一个index.php. 二.编写类代码我们定义一个和文件名相同的类:GrabImage cl ...

html2canvas截取图片不完整,html2canvas关于图片不能一般截取

html2canvas截取图片不完整,html2canvas关于图片不能一般截取相关推荐

最新文章

热门文章