Have you ever used zRender? you can also use canvas.

background:
1. the canvas has a red rectangle with a width of 400 and a height of 100, and the right side exceeds the canvas 100. Click to download, call the toDataURL method, and get the red rectangle of the truncated 300x100. wants to download the complete 400 x100 red rectangle! *

personal idea: get the true width and height of the red rectangle , new a new canvas, width and height equal to it, and then get the red rectangle instance , draw it on the new canvas, and call toDataURL .
question 1 : does canvas have a function that can get the width and height of the real content in the canvas?
question 2 : does canvas have a function that can get an instance of the real content in the canvas? (feel that if you get this, you should get the width and height above.)
similarly:
this is drawn with zRender. Is there any exposed way for zRender to get it

?
Jul.01,2021

new A new canvas is too expensive, and it is finally changed to change the canvas width and offset implementation on the original canvas.
the disadvantage of this implementation is that when you click to download, the user will see the canvas grow and the content in the canvas move.

ideas:

  • 1. Keep the canvas width and height , scale , position before download.
  • 2. Sets the width and height of the canvas to the width and height of the real content.
  • 3. Adjust the offset so that the real content is fully displayed in the canvas.
  • 4. Call the toDataURL method to download.
  • 5. Restore the canvas to its previous state.

Menu