合并图像和文本在swift 4中创建另一个图像

Question

我正在尝试合并 UIImage 和 UITextField 的文本以创建另一个图像，但没有任何成功。

我的应用要做什么？还是应该这样做？

基本上，它获取由方法快照创建的图像，将该图像与 UITextField 中的文本合并，创建另一个将保存并显示在 tableView 中的图像。

但是我很难让它工作。

当我只拍摄图像时，一切正常。按照我的代码。

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let touch = touches.first, let startPoint = startPoint else {return}
    let currentPoint = touch.location(in: imageView)
    let frame = rect(from: startPoint, to: currentPoint)

    rectShapeLayer.removeFromSuperlayer()


    if frame.size.width < 1{
        tfText.resignFirstResponder()
    } else {
        let memedImage = getImage(frame: frame, imageView: self.imageView)
        save(imageView: imageView, image: memedImage)
    }
}

func getImage(frame: CGRect, imageView: UIImageView) -> UIImage {

    let cropImage = imageView.snapshot(rect: frame, afterScreenUpdates: true)

    return cropImage

但是当我尝试使用 UIGraphicsBeginImageContextWithOptions 创建图像以将其与文本字段合并时，我失败了。

关注我的代码

   override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let touch = touches.first, let startPoint = startPoint else {return}
    let currentPoint = touch.location(in: imageView)
    let frame = rect(from: startPoint, to: currentPoint)

    rectShapeLayer.removeFromSuperlayer()


    if frame.size.width < 1{
        tfText.resignFirstResponder()
    } else {
        let memedImage = getImage(frame: frame, imageView: self.imageView)
        save(imageView: imageView, image: memedImage)
    }
}

func getImage(frame: CGRect, imageView: UIImageView) -> UIImage {

    let cropImage = imageView.snapshot(rect: frame, afterScreenUpdates: true)

    UIGraphicsBeginImageContextWithOptions(cropImage.size, false, 0.0)

    cropImage.draw(in: frame)
    tfText.drawText(in: frame)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return newImage
}

让我给你看一些我的应用程序的屏幕截图。

首先只创建图像。

现在当我尝试合并文本和图像时。

请看调试区。

图像已创建，但它们未显示在 tableView 上。

我做错了什么？

更新问题

使用上面的代码，我的 memedImage 是空的。 “谢谢罗”

所以，我把之前的 getImage(_:) 改成了：

   func getANewImage(frame: CGRect, imageView: UIImageView, textField: UITextField) -> UIImage{

    let cropImage = imageView.snapshot(rect: frame, afterScreenUpdates: true)

    let newImageView = UIImageView(image: cropImage)

    UIGraphicsBeginImageContextWithOptions(newImageView.frame.size, false, 0.0)

    let context = UIGraphicsGetCurrentContext()!

    context.translateBy(x: newImageView.frame.origin.x, y: newImageView.frame.origin.y)
    newImageView.layer.render(in: context)
    textField.layer.render(in: context)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return newImage
}

这样我几乎得到了...我用 textField 创建了一个新图像，但是 textField 改变了它的位置，它应该在中心。

使用 .draw 不起作用，但使用 layer.render 几乎可以正常工作。

Answer 1

这个问题我几乎没有帮助，只有我朋友 Rob 的一点暗示。再次感谢 Rob。

很可能，我发现了如何解决 TextField 位置的问题，我想分享解决方案。

func getImage(frame: CGRect, imageView: UIImageView, textField: UITextField) -> UIImage{

    //Get the new image after snapshot method
    let cropImage = imageView.snapshot(rect: frame, afterScreenUpdates: true)

    //Create new imageView with the cropImage
    let newImageView = UIImageView(image: cropImage)

    //Origin point of the Snapshot Frame.
    let frameOriginX = frame.origin.x
    let frameOriginY = frame.origin.y

    UIGraphicsBeginImageContextWithOptions(newImageView.frame.size, false, cropImage.scale)
    let context = UIGraphicsGetCurrentContext()!

    //Render the "cropImage" in the CGContext
    newImageView.layer.render(in: context)

    //Position of the TextField
    let tf_X = textField.frame.origin.x - frameOriginX
    let tf_Y = textField.frame.origin.y - frameOriginY

    //Context Translate with TextField position
    context.translateBy(x: tf_X, y: tf_Y)

    //Render the "TextField" in the CGContext
    textField.layer.render(in: context)

    //Create newImage
    let newImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return newImage
}

当然，这段代码可以优化，但对我来说效果很好。