DevTools - Eyedropper Tool - Used "createImageBitmap(canvas.toBlob())" instead of "createImageBitmap(ctx.getImageData())"

Issue #544
This commit is contained in:
janekptacijarabaci 2018-06-24 20:33:07 +02:00 • committed by Roy Tam
commit c15a614cd0

View file

@ -191,13 +191,14 @@ EyeDropper.prototype = {
}, },
prepareImageCapture() { prepareImageCapture() {
// Get the image data from the content window. // Get the canvas from the content window.
let imageData = getWindowAsImageData(this.win); let canvas = getWindowAsImageData(this.win);
canvas.toBlob(blob => {
// We need to transform imageData to something drawWindow will consume. An ImageBitmap // We need to transform imageData to something drawWindow will consume. An ImageBitmap
// works well. We could have used an Image, but doing so results in errors if the page // works well. We could have used an Image, but doing so results in errors if the page
// defines CSP headers. // defines CSP headers.
this.win.createImageBitmap(imageData).then(image => { this.win.createImageBitmap(blob).then(image => {
this.pageImage = image; this.pageImage = image;
// We likely haven't drawn anything yet (no mousemove events yet), so start now. // We likely haven't drawn anything yet (no mousemove events yet), so start now.
this.draw(); this.draw();
@ -206,6 +207,7 @@ EyeDropper.prototype = {
// was done. // was done.
this.getElement("root").setAttribute("drawn", "true"); this.getElement("root").setAttribute("drawn", "true");
}); });
});
}, },
/** /**
@ -486,7 +488,7 @@ function getWindowAsImageData(win) {
ctx.scale(scale, scale); ctx.scale(scale, scale);
ctx.drawWindow(win, win.scrollX, win.scrollY, width, height, "#fff"); ctx.drawWindow(win, win.scrollX, win.scrollY, width, height, "#fff");
return ctx.getImageData(0, 0, canvas.width, canvas.height); return canvas;
} }
/** /**