合并图像和文本在 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 是空的。 "Thanks Rob"

因此，我将之前的 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.

可能，我发现了如何解决 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
}

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

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

Merge an image and text creating another image in swift 4

uitextfield

uiimage

uigraphicscontext

swift