有用过zRender的吗,用过canvas也行

背景:
1.画布宽高300,里面有一个宽400,高为100的红色矩形,右侧超出画布100,点击下载,调用toDataURL方法,拿到的是被截断的300x100的红色矩形。想要下载完整的400x100的红色矩形!!!*
图片描述

个人思路:拿到红色矩形的真实宽高,new一个新的canvas,宽高等于它,然后再拿到这个红色矩形实例,画到新canvas上,调用toDataURL
问题1:canvas有函数能拿到画布中真实内容的宽高吗?
问题2:canvas有函数能拿到画布中真实内容的实例吗?(感觉拿到这个应该就会拿到上面宽高)
同理:
这个是用zRender画出来的,zRender有哪个暴露的方法可以拿到么

阅读 3.4k
1 个回答

new一个新的canvas代价太大了,最后改成在原canvas上改变画布宽度以及偏移量实现。
这种实现方式缺点:点击下载时用户会看到一瞬间画布增大以及画布中的内容移动。

思路:

  • 1.保留下载前的画布widthheightscaleposition
  • 2.将画布的宽高设置为真实内容的宽高。
  • 3.调整偏移量,使真实内容完全显示在画布中。
  • 4.调用toDataURL方法下载。
  • 5.将画布恢复到之前的状态。

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进