SwiftUI图片缩放、拼图等处理教程

目录
  • 前言
  • 1、图片缩放
  • 2、图片拼图
  • 3、图片操作方法
  • 4、示例代码
  • 5、结尾

前言

采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取。

1、图片缩放

  • 完全填充,变形压缩
  • 将图像居中缩放截取
  • 等比缩放

上面三个效果,放一起比较好对比,如下

原图 - 完全填充,变形压缩 - 居中缩放截取 - 等比缩放

  • 第1张为原图
  • 第2张为完全填充,变形压缩
  • 第3张为图像居中缩放截取
  • 第4张为等比缩放

示例中缩放前后的图片可导出

2、图片拼图

顾名思义,将多张图片组合成一张图,以下为多张美图原图:

多张美图原图

选择后,界面中预览:

界面中预览

导出拼图查看效果:

导出拼图

3、图片操作方法

最后上图片缩放、拼图代码:

import SwiftUI

struct ImageHelper {

    static let shared = ImageHelper()
    private init() {}

    // NSView 转 NSImage
    func imageFromView(cview: NSView) -> NSImage? {

        // 从view、data、CGImage获取BitmapImageRep
        // NSBitmapImageRep *bitmap = [NSBitmapImageRep imageRepWithData:data];
        // NSBitmapImageRep *bitmap = [[[NSBitmapImageRep alloc] initWithCGImage:CGImage];
        guard let bitmap: NSBitmapImageRep = cview.bitmapImageRepForCachingDisplay(in: cview.visibleRect) else { return nil }
        cview.cacheDisplay(in: cview.visibleRect, to: bitmap)
        let image: NSImage = NSImage(size: cview.frame.size)
        image.addRepresentation(bitmap)

        return image;
    }

    // 保存图片到本地
    func saveImage(image: NSImage, fileName: String) -> Bool {
        guard var imageData = image.tiffRepresentation,
              let imageRep = NSBitmapImageRep(data: imageData) else { return false }

        //    [imageRep setSize:size];  // 只是打开图片时的初始大小,对图片本省没有影响
        // jpg
        if(fileName.hasSuffix("jpg")) {
            let quality:NSNumber = 0.85 // 压缩率
            imageData = imageRep.representation(using: .jpeg, properties:[.compressionFactor:quality])!

        } else {
            // png
            imageData = imageRep.representation(using: .png, properties:[:])!
        }

        do {
            // 写文件 保存到本地需要关闭沙盒  ---- 保存的文件路径一定要是绝对路径,相对路径不行
            try imageData.write(to: URL(fileURLWithPath: fileName), options: .atomic)
            return true
        } catch {
            return false
        }
    }

    // 将图片按照比例压缩
    // rate 压缩比0.1~1.0之间
    func compressedImageDataWithImg(image: NSImage, rate: CGFloat) -> NSData? {
        guard let imageData = image.tiffRepresentation,
              let imageRep = NSBitmapImageRep(data: imageData) else { return nil }
        guard let data: Data = imageRep.representation(using: .jpeg, properties:[.compressionFactor:rate]) else { return nil }

        return data as NSData;
    }

    // 完全填充,变形压缩
    func resizeImage(sourceImage: NSImage, forSize size: NSSize) -> NSImage {
        let targetFrame: NSRect = NSMakeRect(0, 0, size.width, size.height);

        let sourceImageRep: NSImageRep = sourceImage.bestRepresentation(for: targetFrame, context: nil, hints: nil)!
        let targetImage: NSImage = NSImage(size: size)

        targetImage.lockFocus()
        sourceImageRep.draw(in: targetFrame)
        targetImage.unlockFocus()

        return targetImage;
    }

    // 将图像居中缩放截取targetsize
    func resizeImage1(sourceImage: NSImage, forSize targetSize: CGSize) -> NSImage {

        let imageSize: CGSize = sourceImage.size
        let width: CGFloat = imageSize.width
        let height: CGFloat = imageSize.height
        let targetWidth: CGFloat = targetSize.width
        let targetHeight: CGFloat = targetSize.height
        var scaleFactor: CGFloat = 0.0

        let widthFactor: CGFloat = targetWidth / width
        let heightFactor: CGFloat = targetHeight / height
        scaleFactor = (widthFactor > heightFactor) ? widthFactor : heightFactor

        // 需要读取的源图像的高度或宽度
        let readHeight: CGFloat = targetHeight / scaleFactor
        let readWidth: CGFloat = targetWidth / scaleFactor
        let readPoint: CGPoint = CGPoint(x: widthFactor > heightFactor ? 0 : (width - readWidth) * 0.5,
                                         y: widthFactor < heightFactor ? 0 : (height - readHeight) * 0.5)

        let newImage: NSImage = NSImage(size: targetSize)
        let thumbnailRect: CGRect = CGRect(x: 0, y: 0, width: targetSize.width, height: targetSize.height)
        let imageRect: NSRect = NSRect(x: readPoint.x, y: readPoint.y, width: readWidth, height: readHeight)

        newImage.lockFocus()
        sourceImage.draw(in: thumbnailRect, from: imageRect, operation: .copy, fraction: 1.0)
        newImage.unlockFocus()

        return newImage;
    }

    // 等比缩放
    func resizeImage2(sourceImage: NSImage, forSize targetSize: CGSize) -> NSImage {

        let imageSize: CGSize = sourceImage.size
        let width: CGFloat = imageSize.width
        let height: CGFloat = imageSize.height
        let targetWidth: CGFloat = targetSize.width
        let targetHeight: CGFloat = targetSize.height
        var scaleFactor: CGFloat = 0.0
        var scaledWidth: CGFloat = targetWidth
        var scaledHeight: CGFloat = targetHeight
        var thumbnailPoint: CGPoint = CGPoint(x: 0.0, y: 0.0)

        if __CGSizeEqualToSize(imageSize, targetSize) == false {
            let widthFactor: CGFloat = targetWidth / width
            let heightFactor:  CGFloat = targetHeight / height

            // scale to fit the longer
            scaleFactor = (widthFactor > heightFactor) ? widthFactor : heightFactor
            scaledWidth  = ceil(width * scaleFactor)
            scaledHeight = ceil(height * scaleFactor)

            // center the image
            if (widthFactor > heightFactor) {
                thumbnailPoint.y = (targetHeight - scaledHeight) * 0.5
            } else if (widthFactor < heightFactor) {
                thumbnailPoint.x = (targetWidth - scaledWidth) * 0.5
            }
        }

        let newImage: NSImage = NSImage(size: NSSize(width: scaledWidth, height: scaledHeight))
        let thumbnailRect: CGRect = CGRect(x: thumbnailPoint.x, y: thumbnailPoint.y, width: scaledWidth, height: scaledHeight)
        let imageRect: NSRect = NSRect(x: 0.0, y:0.0, width: width, height: height)

        newImage.lockFocus()
        sourceImage.draw(in: thumbnailRect, from: imageRect, operation: .copy, fraction: 1.0)
        newImage.unlockFocus()

        return newImage;
    }

    // 将图片压缩到指定大小(KB)
    func compressImgData(imgData: NSData, toAimKB aimKB: NSInteger) -> NSData? {

        let aimRate: CGFloat = CGFloat(aimKB * 1000) / CGFloat(imgData.length)

        let imageRep: NSBitmapImageRep = NSBitmapImageRep(data: imgData as Data)!
        guard let data: Data = imageRep.representation(using: .jpeg, properties:[.compressionFactor:aimRate]) else { return nil }

        print("数据最终大小:\(CGFloat(data.count) / 1000), 压缩比率:\(CGFloat(data.count) / CGFloat(imgData.length))")

        return data as NSData
    }

    // 组合图片
    func jointedImageWithImages(imgArray: [NSImage]) -> NSImage {

        var imgW: CGFloat = 0
        var imgH: CGFloat = 0
        for img in imgArray {
            imgW += img.size.width;
            if (imgH < img.size.height) {
                imgH = img.size.height;
            }
        }

        print("size : \(NSStringFromSize(NSSize(width: imgW, height: imgH)))")

        let togetherImg: NSImage = NSImage(size: NSSize(width: imgW, height: imgH))

        togetherImg.lockFocus()

        let imgContext: CGContext? = NSGraphicsContext.current?.cgContext

        var imgX: CGFloat = 0
        for imgItem in imgArray {
            if let img = imgItem as? NSImage {
                let imageRef: CGImage = self.getCGImageRefFromNSImage(image: img)!
                imgContext?.draw(imageRef, in: NSRect(x: imgX, y: 0, width: img.size.width, height: img.size.height))

            imgX += img.size.width;
            }
        }

        togetherImg.unlockFocus()

        return togetherImg;

    }

    // NSImage转CGImageRef
    func getCGImageRefFromNSImage(image: NSImage) -> CGImage? {

        let imageData: NSData? = image.tiffRepresentation as NSData?
        var imageRef: CGImage? = nil
        if(imageData != nil) {
            let imageSource: CGImageSource = CGImageSourceCreateWithData(imageData! as CFData, nil)!

            imageRef = CGImageSourceCreateImageAtIndex(imageSource, 0, nil)
        }
        return imageRef;
    }

    // CGImage 转 NSImage
    func getNSImageWithCGImageRef(imageRef: CGImage) -> NSImage? {

        return NSImage(cgImage: imageRef, size: NSSize(width: imageRef.width, height: imageRef.height))
//        var imageRect: NSRect = NSRect(x: 0, y: 0, width: 0, height: 0)
//
//        var imageContext: CGContext? = nil
//        var newImage: NSImage? = nil
//
//        imageRect.size.height = CGFloat(imageRef.height)
//        imageRect.size.width = CGFloat(imageRef.width)
//
//        // Create a new image to receive the Quartz image data.
//        newImage = NSImage(size: imageRect.size)
//
//        newImage?.lockFocus()
//        // Get the Quartz context and draw.
//        imageContext = NSGraphicsContext.current?.cgContext
//        imageContext?.draw(imageRef, in: imageRect)
//        newImage?.unlockFocus()
//
//        return newImage;
    }

    // NSImage转CIImage
    func getCIImageWithNSImage(image: NSImage) -> CIImage?{

        // convert NSImage to bitmap
        guard let imageData = image.tiffRepresentation,
              let imageRep = NSBitmapImageRep(data: imageData) else { return nil }

        // create CIImage from imageRep
        let ciImage: CIImage = CIImage(bitmapImageRep: imageRep)!

        // create affine transform to flip CIImage
        let affineTransform: NSAffineTransform = NSAffineTransform()
        affineTransform.translateX(by: 0, yBy: 128)
        affineTransform.scaleX(by: 1, yBy: -1)

        // create CIFilter with embedded affine transform
        let transform:CIFilter = CIFilter(name: "CIAffineTransform")!
        transform.setValue(ciImage, forKey: "inputImage")
        transform.setValue(affineTransform, forKey: "inputTransform")

        // get the new CIImage, flipped and ready to serve
        let result: CIImage? = transform.value(forKey: "outputImage") as? CIImage
        return result;
    }
}

4、示例代码

界面布局及效果展示代码

import SwiftUI

struct TestImageDemo: View {
    @State private var sourceImagePath: String?
    @State private var sourceImage: NSImage?
    @State private var sourceImageWidth: CGFloat = 0
    @State private var sourceImageHeight: CGFloat = 0
    @State private var resizeImage: NSImage?
    @State private var resizeImageWidth: String = "250"
    @State private var resizeImageHeight: String = "250"
    @State private var resize1Image: NSImage?
    @State private var resize1ImageWidth: String = "250"
    @State private var resize1ImageHeight: String = "250"
    @State private var resize2Image: NSImage?
    @State private var resize2ImageWidth: String = "250"
    @State private var resize2ImageHeight: String = "250"
    @State private var joinImage: NSImage?
    var body: some View {
        GeometryReader { reader in
            VStack {
                HStack {
                    Button("选择展示图片缩放", action: self.choiceResizeImage)
                    Button("选择展示图片拼图", action: self.choiceJoinImage)
                    Spacer()
                }

                HStack {

                    VStack {
                        if let sImage = sourceImage {
                            Section(header: Text("原图")) {
                                Image(nsImage: sImage)
                                    .resizable().aspectRatio(contentMode: .fit)
                                    .frame(width: reader.size.width / 2)
                                Text("\(self.sourceImageWidth)*\(self.sourceImageHeight)")
                                Button("导出", action: { self.saveImage(image: sImage) })
                            }
                        }
                        if let sImage = self.joinImage {
                            Section(header: Text("拼图")) {
                                Image(nsImage: sImage)
                                    .resizable().aspectRatio(contentMode: .fit)
                                    .frame(width: reader.size.width)
                                Button("导出", action: { self.saveImage(image: sImage) })
                            }
                        }
                    }
                    VStack {
                        Section(header: Text("完全填充,变形压缩")) {
                            VStack {
                                Section(header: Text("Width:")) {
                                    TextField("Width", text: self.$resizeImageWidth)
                                }
                                Section(header: Text("Height:")) {
                                    TextField("Height", text: self.$resizeImageHeight)
                                }
                                if let sImage = resizeImage {
                                    Image(nsImage: sImage)
                                    Text("\(self.resizeImageWidth)*\(self.resizeImageHeight)")
                                    Button("导出", action: { self.saveImage(image: sImage) })
                                }
                            }
                        }
                    }
                    VStack {
                        Section(header: Text("将图像居中缩放截取")) {
                            VStack {
                                Section(header: Text("Width:")) {
                                    TextField("Width", text: self.$resize1ImageWidth)
                                }
                                Section(header: Text("Height:")) {
                                    TextField("Height", text: self.$resize1ImageHeight)
                                }
                                if let sImage = resize1Image {
                                    Image(nsImage: sImage)
                                    Text("\(self.resize1ImageWidth)*\(self.resize1ImageHeight)")
                                    Button("导出", action: { self.saveImage(image: sImage) })
                                }
                            }
                        }
                    }
                    VStack {
                        Section(header: Text("等比缩放")) {
                            VStack {
                                Section(header: Text("Width:")) {
                                    TextField("Width", text: self.$resize2ImageWidth)
                                }
                                Section(header: Text("Height:")) {
                                    TextField("Height", text: self.$resize2ImageHeight)
                                }
                                if let sImage = resize2Image {
                                    Image(nsImage: sImage)
                                    Text("\(self.resize2ImageWidth)*\(self.resize2ImageHeight)")
                                    Button("导出", action: { self.saveImage(image: sImage) })
                                }
                            }
                        }
                    }
                    Spacer()
                }
                Spacer()
            }
        }
    }

    private func choiceResizeImage() {
        let result: (fail: Bool, url: [URL?]?) =
            DialogProvider.shared.showOpenFileDialog(title: "", prompt: "", message: "选择图片", directoryURL: URL(fileURLWithPath: ""), allowedFileTypes: ["png", "jpg", "jpeg"])
        if result.fail {
            return
        }
        if let urls = result.url,
           let url = urls[0] {
            self.sourceImagePath = url.path
            self.sourceImage = NSImage(contentsOf: URL(fileURLWithPath: self.sourceImagePath!))
            self.sourceImageWidth = (self.sourceImage?.size.width)!
            self.sourceImageHeight = (self.sourceImage?.size.height)!
            if let resizeWidth = Int(self.resizeImageWidth),
               let resizeHeight = Int(self.resizeImageHeight) {
                self.resizeImage = ImageHelper.shared.resizeImage(sourceImage: self.sourceImage!, forSize: CGSize(width: resizeWidth, height: resizeHeight))
            }
            if let resize1Width = Int(self.resize1ImageWidth),
               let resize1Height = Int(self.resize1ImageHeight) {
                self.resize1Image = ImageHelper.shared.resizeImage1(sourceImage: self.sourceImage!, forSize: CGSize(width: resize1Width, height: resize1Height))
            }
            if let resize2Width = Int(self.resize2ImageWidth),
               let resize2Height = Int(self.resize2ImageHeight) {
                self.resize2Image = ImageHelper.shared.resizeImage1(sourceImage: self.sourceImage!, forSize: CGSize(width: resize2Width, height: resize2Height))
            }
        }
    }

    private func choiceJoinImage() {
        let result: (fail: Bool, url: [URL?]?) =
            DialogProvider.shared.showOpenFileDialog(title: "", prompt: "", message: "选择图片", directoryURL: URL(fileURLWithPath: ""), allowedFileTypes: ["png", "jpg", "jpeg"], allowsMultipleSelection: true)
        if result.fail {
            return
        }
        if let urls = result.url {
            var imgs: [NSImage] = []
            for url in urls {
                if let filePath = url?.path {
                    imgs.append(NSImage(contentsOf: URL(fileURLWithPath: filePath))!)
                }
            }
            if imgs.count > 0 {
                self.joinImage = ImageHelper.shared.jointedImageWithImages(imgArray: imgs)
            }
        }
    }

    private func saveImage(image: NSImage) {
        let result: (isOpenFail: Bool, url: URL?) =
            DialogProvider.shared.showSaveDialog(
                title: "选择图片存储路径",
                directoryURL: URL(fileURLWithPath: ""),
                prompt: "",
                message: "",
                allowedFileTypes: ["png"]
            )
        if result.isOpenFail || result.url == nil || result.url!.path.isEmpty {
            return
        }

        let exportImagePath = result.url!.path
        _ = ImageHelper.shared.saveImage(image: image, fileName: exportImagePath)
        NSWorkspace.shared.activateFileViewerSelecting([URL(fileURLWithPath: exportImagePath)])
    }
}

struct TestImageDemo_Previews: PreviewProvider {
    static var previews: some View {
        TestImageDemo()
    }
}

5、结尾

所有代码已贴,并且代码已上传Github,见下面备注。

本文示例代码:https://github.com/dotnet9/MacTest/blob/main/src/macos_test/macos_test/TestImageDemo.swift

参考文章标题:《MAC图像NSIMAGE缩放、组合、压缩及CIIMAGEREF和NSIMAGE转换处理》

参考文章链接:https://www.freesion.com/article/774352759/

到此这篇关于SwiftUI图片缩放、拼图等处理的文章就介绍到这了,更多相关SwiftUI图片缩放、拼图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • SwiftUI图片缩放、拼图等处理教程

    目录 前言 1.图片缩放 2.图片拼图 3.图片操作方法 4.示例代码 5.结尾 前言 采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压缩 将图像居中缩放截取 等比缩放 上面三个效果,放一起比较好对比,如下 原图 - 完全填充,变形压缩 - 居中缩放截取 - 等比缩放 第1张为原图 第2张为完全填充,变形压缩 第3张为图像居中缩放截取 第4张为等

  • php初学者教程之图片缩放和裁剪

    php程序中改变图片大小的函数大多数人都想到用imagecopyresized(),不过经过测试比较发现,使用imagecopyresampled()改变的图片质量更高. 1.imagecopyresampled的使用 1.目标函数资源 2.源图像资源<要采样的图片资源> 3.x(0,0指图左上角) 4.y(x,y确定一个坐标,坐标确定了把采样的部分放到目标图像资源的位置) 5.源x(0,0指图右上角) 6.源y(源x与源y确定一个坐标,你要采用的原图像资源的某个部分的起始位置) 7.w 8.

  • PHP自定义图片缩放函数实现等比例不失真缩放的方法

    本文实例讲述了PHP自定义图片缩放函数实现等比例不失真缩放的方法.分享给大家供大家参考,具体如下: function resizeImage($im,$maxwidth,$maxheight,$name,$filetype) { $pic_width = imagesx($im); $pic_height = imagesy($im); if(($maxwidth && $pic_width > $maxwidth) || ($maxheight && $pic_he

  • jQuery实现的鼠标滚轮控制图片缩放功能实例

    本文实例讲述了jQuery实现的鼠标滚轮控制图片缩放功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • PHP图片处理之使用imagecopyresampled函数实现图片缩放例子

    网站优化不能只定在代码上,内容也是网站最需要优化的对象之一,而图像又是网站中最主要的内容.图像的优化最需要处理的就是将所有上传到网站中的大图片自动缩放称小图(在网页中大小够用就行),以减少N倍的存储空间,并提高下载浏览的速度.所以图片缩放成一个动态网站必须要处理的任务,经常和文件上传绑定在一起工作,能在上传图片的同时就调整其大小.当然有时也需要单独处理图片缩放,例如在做图片列表时,如果直接用大图而在显示时才将其缩放成小图,这样做不仅下载速度会变慢,也会降低页面响应时间.通常遇到这样的应用都是在上

  • jQuery图片缩放插件smartZoom使用实例详解

    e-smart-zoom-jquery.js插件,下载地址及示例:https://github.com/e-smartdev/smartJQueryZoom 插件描述:通过将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果. smartZoom使用 举个栗子,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit

  • 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现

    PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品. 为谁而用 让移动站点的相册体验和原生App一样的设计师和开发者. 绝佳特性 PhotoSwipe提供给用户一个熟悉又直观的相册交互界面. 官方网站 http://www.photoswipe.com/ 源码示例 http://github.com/downloads/codecomputerlove/P

  • Android 图片缩放与旋转的实现详解

    本文使用Matrix实现Android实现图片缩放与旋转.示例代码如下: 复制代码 代码如下: package com.android.matrix;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Matrix;import android.graphics.drawable.BitmapDrawable

  • iOS应用开发中使用UIScrollView控件来实现图片缩放

    一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 2.UIScrollV

  • js实现鼠标滚轮控制图片缩放效果的方法

    本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

随机推荐