JS截图问题(寻找Canvas toDataURL 空白问题的解决方案)

背景:

使用js截图当前页面的某个位置上传到服务器

寻找方案:

使用 html2canvas 方案
http://html2canvas.hertzen.com/

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

使用Canvas toDataURL的方案
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

var canvas = document.getElementById("abc");
var dataURL = canvas.toDataURL();

发现问题:

需要截图的地方是一个使用canvas绘制的,但是普通的canvas绘制的使用html2canvas也是OK的。这里会出现截图不完整的情况。
Canvas toDataURL 发现仍然是空白

可能正如网上所说，Canvas使用的事webgl来渲染的。
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement

getContext(in DOMStringcontextId) 
object 
返回canvas的绘制上下文,如果指定的上下文ID不支持,则返回null.一个绘制上下文可以让你在canvas上绘图.
目前可接受的参数有"2d"和"experimental-webgl"."experimental-webgl"上下文只在那些实现了WebGL的浏览器上可用.
调用getContext("2d")会返回一个 CanvasRenderingContext2D对象,
调用getContext("experimental-webgl")会返回一个WebGLRenderingContext对象.

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

最终方案:

 var canvas = document.getElementById('abc');
 var gl = canvas.getContext('webgl');
 gl.canvas.toDataURL();

还可以有一些参数来配合：
.getContext("experimental-webgl", {preserveDrawingBuffer: true});
.toDataURL();

oDataURL(in optional DOMString type, in any ...args) 
DOMString 
返回一个data: URL,根据type参数指定的类型将包含在canvas中的图片文件编码成字符串形式,
 type参数的默认值为image/png.如果该canvas的宽度或长度是0,则会返回字符串"data:,".
 如果指定的type参数不是image/png,但返回的字符串是以data:image/png开头的,
 则所请求的图片类型不支持.Chrome支持image/webp类型.如果type参数的值为image/jpeg或image/webp,
 则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数,如果第二个参数的值不在0.0和1.0之间,则会使用默认的图片质量.

---

原创文章，版权所有，禁止抄袭，违者必究！！！转载请注明出处！！！技术需要请联系[email protected].