版权声明：本文为博主原创文章，未经博主允许不得转载，如有技术需要联系[email protected]! https://blog.csdn.net/harrison2010/article/details/82915929
背景:
使用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].