背景:

使用js截圖當前頁面的某個位置上傳到伺服器

尋找方案:

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

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

發現問題:

需要截圖的地方是一個使用canvas繪製的,但是普通的canvas繪製的使用html2canvas也是OK的。這裡會出現截圖不完整的情況。 Canvas toDataURL 發現仍然是空白

getContext(in DOMStringcontextId) 
object 
返回canvas的繪製上下文,如果指定的上下文ID不支援,則返回null.一個繪製上下文可以讓你在canvas上繪圖.
目前可接受的引數有"2d"和"experimental-webgl"."experimental-webgl"上下文只在那些實現了WebGL的瀏覽器上可用.
呼叫getContext("2d")會返回一個 CanvasRenderingContext2D物件,
呼叫getContext("experimental-webgl")會返回一個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]