Canvas2D: Multiple readback operations using getImageData

canvas로 무언가를 그리는걸 구현했는데 1초에 한번 읽고

다시 붙여 넣고, 다시 1줄 붙여 넣고 이런식으로 1초 이내에 몇번의 작업을 하는 코드를 작성했더니

크롬에서 아래와 같은 notice 를 띄운다. 일단 최소한 경고는 아닌데..

Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently

 

링크를 찾아가서 보면 will read frequently를 true 로 설정해주면 최적화 된다고 하는데

The CanvasRenderingContext2D object also has a will read frequently boolean. When a CanvasRenderingContext2D object's will read frequently is true, the user agent may optimize the canvas for readback operations. On most devices the user agent needs to decide whether to store the canvas's output bitmap on the GPU (this is also called "hardware accelerated"), or on the CPU (also called "software"). Most rendering operations are more performant for accelerated canvases, with the major exception being readback with getImageData(), toDataURL(), or toBlob(). CanvasRenderingContext2D objects with will read frequently equal to true tell the user agent that the webpage is likely to perform many readback operations and that it is advantageous to use a software canvas.

 

어디다가 저걸 넣어야 하나 해서 따라가보니 getContext("2d")로 끝낼게 아니라, 초기화 옵션으로 주면 되는 듯.

context = canvas.getContext('2d' [, { [ alpha: true ] [, desynchronized: false ] [, colorSpace: 'srgb'] [, willReadFrequently: false ]} ])Returns a CanvasRenderingContext2D object that is permanently bound to a particular canvas element. If the alpha member is false, then the context is forced to always be opaque. If the desynchronized member is true, then the context might be desynchronized. The colorSpace member specifies the color space of the rendering context. If the willReadFrequently member is true, then the context is marked for readback optimization. context.canvas ✔MDN Returns the canvas element. attributes = context.getContextAttributes()Returns an object whose: alpha member is true if the context has an alpha channel, or false if it was forced to be opaque. desynchronized member is true if the context can be desynchronized. colorSpace member is a string indicating the context's color space. willReadFrequently member is true if the context is marked for readback optimization.

[링크 : https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d]

 

그래서 결과적으로 아래와 같이 getContext에 willReadFrequently 를 추가해주니 별다른 경고가 발생하지 않는다.

var canvas = document.getElementById(cvsID) var ctx = canvas.getContext("2d"); var imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1);

var canvas = document.getElementById(cvsID) var ctx = canvas.getContext("2d", {willReadFrequently : true} ); var imgObj = ctx.getImageData(0,0, canvas.width, canvas.height - 1);

[링크 : https://stackoverflow.com/questions/74101155/chrome-warning-willreadfrequently-attribute-set-to-true]