如何在后台创建CGContext离线重绘并导出无变换的原始绘图图像

你不需要依赖当前屏幕上挂载的CGContext，完全可以在离开画布场景后的任意时机，基于已存储的线条数据创建离屏位图上下文完成渲染导出，全程不会把内容渲染到屏幕，导出的内容也不会带上任何缩放、平移的手势变换效果，就是原始1:1的绘图内容。

具体实现步骤 #

• 先确认原始画布基准尺寸
  用你最开始初始化绘图画布时的逻辑尺寸（也就是未施加任何pinch缩放、pan平移变换前的画布大小，不要拿当前屏幕上缩放后的视图尺寸）作为导出图像的尺寸。
• 创建离屏位图图形上下文
  优先用UIGraphicsBeginImageContextWithOptions创建就行，不需要给这个上下文叠加任何平移、缩放的CGAffineTransform变换，保持坐标系和你原始绘图的坐标系完全对齐。核心代码示例：

  // 替换为你自己存储的原始画布尺寸
  let originalSize = CGSize(width: canvasOriginalWidth, height: canvasOriginalHeight)
  // scale参数传0会自动适配设备的屏幕缩放因子，传1则导出1x分辨率的无缩放图像
  UIGraphicsBeginImageContextWithOptions(originalSize, false, 0)
  guard let renderContext = UIGraphicsGetCurrentContext() else {
      // 上下文创建失败的兜底逻辑
      return
  }
  

• 基于存储的原始线条数据重绘
  遍历你持久化存储的所有线条数据，按照每条线的原始颜色、线宽、路径点位，直接绘制到离屏上下文中。注意不要把处理交互手势时给屏幕视图加的变换效果带到这里的绘制逻辑里，就用最原始的坐标数据绘制：

  renderContext.setLineCap(.round)
  renderContext.setLineJoin(.round)
  for line in storedLineArray {
      renderContext.setStrokeColor(line.strokeColor.cgColor)
      renderContext.setLineWidth(line.lineWidth)
      renderContext.addPath(line.originalCGPath)
      renderContext.strokePath()
  }
  

• 导出对应格式的图像数据
  所有内容绘制完成后，直接从离屏上下文取出渲染好的图像，按需转成PNG或者JPEG格式即可，最后记得关闭释放上下文：

  guard let exportImage = UIGraphicsGetImageFromCurrentImageContext() else {
      UIGraphicsEndImageContext()
      return
  }
  UIGraphicsEndImageContext()
  // 导出PNG数据
  let pngData = exportImage.pngData()
  // 导出JPEG的话用下面的接口，compressionQuality为压缩质量，范围0~1
  // let jpegData = exportImage.jpegData(compressionQuality: 0.9)
  

避坑提示 #

如果你之前存储线条点位时，存的是经过缩放平移后的屏幕相对坐标，那重绘前必须先做坐标逆变换，把所有点位还原到原始画布坐标系下再绘制，否则导出的图像会出现位置偏移、比例错误的问题。只要你存储的是原始画布坐标系下的路径数据，直接按上述逻辑绘制即可。
整个渲染流程不需要依赖任何可见视图，你可以在用户点击上传按钮时再触发执行，不需要提前在画布页面生成图片。如果用底层CGBitmapContextCreate接口创建上下文，整个流程还可以放到后台线程执行，不会阻塞UI。

内容的提问来源于stack exchange，提问作者haik.ampardjian