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,20 +191,22 @@ 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);
// We need to transform imageData to something drawWindow will consume. An ImageBitmap canvas.toBlob(blob => {
// works well. We could have used an Image, but doing so results in errors if the page // We need to transform imageData to something drawWindow will consume. An ImageBitmap
// defines CSP headers. // works well. We could have used an Image, but doing so results in errors if the page
this.win.createImageBitmap(imageData).then(image => { // defines CSP headers.
this.pageImage = image; this.win.createImageBitmap(blob).then(image => {
// We likely haven't drawn anything yet (no mousemove events yet), so start now. this.pageImage = image;
this.draw(); // We likely haven't drawn anything yet (no mousemove events yet), so start now.
this.draw();
// Set an attribute on the root element to be able to run tests after the first draw // Set an attribute on the root element to be able to run tests after the first draw
// 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;
} }
/** /**