Swift缩放并填充图片功能的实现

摘要

直接操作图片来实现它的缩放或者填充多余空间，首选 UIGraphicsBeginImageContext 函数来实现，它就相当于一个画布，你甚至可以用它来涂鸦。

最近有一个需求，就是将图片先等比例缩放到指定大小，然后将空余出来空间填充为黑色，返回指定大小的图片。

这种直接操作图片的需求，就要考虑使用 UIGraphicsBeginImageContext 函数实现。它可以理解为一个画布，我们只需要把图片放在画布的对应位置，把画布的多余地方全部涂成黑色就完成。

实现

先看代码，然后再分析：

func rescaleAndPading(_ image: UIImage, targetSize: CGSize) -> UIImage? {
        let max = max(image.width, image.height)
        let ratio = Float(targetSize.width) / Float(max)

        let (newWidth, newHeight) = (

            Int(Float(image.width) * ratio),
            Int(Float(image.height) * ratio)
        )

        let (tarWidth, tarHeight) = (

            Int(targetSize.width),
            Int(targetSize.height)
        )

        let deltaW = tarWidth - newWidth
        let deltaH = tarHeight - newHeight

        let (y, x) = (

            deltaH / 2,
            deltaW / 2
        )

        // 创建绘图上下文环境
        UIGraphicsBeginImageContext(targetSize)
        let context = UIGraphicsGetCurrentContext()
        // 黄色背景
        context?.setFillColor(UIColor.yellow.cgColor)
        context?.fill(CGRect(x: 0, y: 0, width: tarWidth, height: tarHeight))
        image.draw(in: CGRect(x: x, y: y, width: newWidth, height: newHeight))
        // 获取上下文里的内容，将视图写入到新的图像对象
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    }

看代码，总结出逻辑很简单，就是首先根据目标的 size 来计算出需要缩放的比例（按照最大边来处理），计算出图片在画布中的对应位置和缩放后的宽高。

最后就是重头戏，调用 UIGraphicsBeginImageContext 来绘画。这里要留意几个参数的设置：

  • UIGraphicsBeginImageContext(targetSize) 中的 targetSize 是设置画布的大小。
  • image.draw(in:) 是图片在画布中的 rect 。
  • context 是画布的对象
  • context?.setFillColor(_) 是设置画布的颜色，若不设置，默认为 black（黑色）
  • context?.fill()是设置画布填充的 rect。

重点

如果是前面留意逻辑时，会发现逻辑中是先放置图片，然后填充空余空间，但是代码中是先填充全部空间，然后再放置图片，这是为什么？

经过测试后发现，后绘制的区域会覆盖掉先前已经绘制的区域，所以代码中的处理就是防止填充区域覆盖图片区域。

到此这篇关于Swift缩放并填充图片功能的实现的文章就介绍到这了,更多相关Swift缩放填充图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

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

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

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

  • 如何利用SwiftUI实现可缩放的图片预览器

    目录 前言 实现过程 程序的初步构想 显示 UIImage 双击缩放 放大手势缩放 预览任意 View 将 UIImage 从 LBJImagePreviewer 剥离 源码 总结 前言 在开发中,我们经常会遇到点击图片查看大图的需求.在 Apple 的推动下,iOS 开发必定会从 UIKit 慢慢向 SwiftUI 转变.为了更好地适应这一趋势,今天我们用 SwiftUI 实现一个可缩放的图片预览器. 实现过程 程序的初步构想 要做一个程序,首先肯定是给它起个名字.既然是图片预览器(Image

  • iOS SwiftUI 颜色渐变填充效果的实现

    SwiftUI 为我们提供了各种梯度选项,所有这些选项都可以通过多种方式使用. Gradient 渐变器 A color gradient represented as an array of color stops, each having a parametric location value. gradient是一组颜色的合集,每个颜色都忽略位置参数 LinearGradient 线性渐变器 线性渐变器拥有沿轴进行渐变函数,我们可以自定义设置颜色空间.起点和终点. 下面我们看看Linear

  • Swift缩放并填充图片功能的实现

    摘要 直接操作图片来实现它的缩放或者填充多余空间,首选 UIGraphicsBeginImageContext 函数来实现,它就相当于一个画布,你甚至可以用它来涂鸦. 最近有一个需求,就是将图片先等比例缩放到指定大小,然后将空余出来空间填充为黑色,返回指定大小的图片. 这种直接操作图片的需求,就要考虑使用 UIGraphicsBeginImageContext 函数实现.它可以理解为一个画布,我们只需要把图片放在画布的对应位置,把画布的多余地方全部涂成黑色就完成. 实现 先看代码,然后再分析:

  • PHP实现图片的等比缩放和Logo水印功能示例

    本文实例讲述了PHP实现图片的等比缩放和Logo水印功能.分享给大家供大家参考,具体如下: /** * 等比缩放函数(以保存的方式实现) * @param string $picname 被缩放的处理图片源 * @param int $maxx 缩放后图片的最大宽度 * @param int $maxy 缩放后图片的最大高度 * @param string $pre 缩放后图片名的前缀名 * @return String 返回后的图片名称(带路径),如a.jpg=>s_a.jpg */ func

  • iOS中实现动态区域裁剪图片功能实例

    iOS中实现动态区域裁剪图片功能实例

    前言 相信大家应该都有所体会,裁剪图片功能在很多上传图片的场景里都需要用到,一方面应用服务器可能对图片的尺寸大小有限制,因而希望上传的图片都是符合规定的,另一方面,用户可能希望只上传图片中的部分内容,突出图片中关键的信息.而为了满足用户多种多样的裁剪需求,就需要裁剪图片时能支持由用户动态地改变裁剪范围.裁剪尺寸等. 动态裁剪图片的基本过程大致可以分为以下几步 显示图片与裁剪区域 支持移动和缩放图片 支持手势改变裁剪区域 进行图片裁剪并获得裁剪后的图片 显示图片与裁剪区域 显示图片 在裁剪图片之前

  • Python 模拟动态产生字母验证码图片功能

    模拟动态产生字母验证码图片 模拟生成验证码,首先要做的是生成随机的字母,然后对字母进行模糊处理.这里介绍一下 Python 提供的 Pillow 模块. Pillow PIL:Python Image Library,Python 的图像处理标准库,功能强大. PIL 是第三方库,使用之前需要先进行安装.具体的命令如下:(如果安装了 Anaconda,这一步可以跳过) $ pip install pillow 下面先简单介绍 Pillow 的功能. 操作图像 缩放图像,是 Pillow 的一个功

  • Android App中实现可以双击放大和缩小图片功能的实例

    先来看一个很简单的核心图片缩放方法: public static Bitmap scale(Bitmap bitmap, float scaleWidth, float scaleHeight) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Log.i(TAG, "s

  • PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】

    本文实例讲述了PHP实现将几张照片拼接到一起的合成图片功能.分享给大家供大家参考,具体如下: <?php /** * 作品合成程序 * 针对单面,封面不做特殊处理 */ $src_path = $argv[1]; // php该文件,第一个参数是文件夹名(作品集),可相对路径 $dst_path = '../image/'.$src_path; // 生成文件存放的目标位置 if (!file_exists($dst_path)){ mkdir($dst_path); } // 合成图推荐大小,

  • Ubuntu下使用Python实现游戏制作中的切分图片功能

    Ubuntu下使用Python实现游戏制作中的切分图片功能

    本文实例讲述了Ubuntu下使用Python实现游戏制作中的切分图片功能.分享给大家供大家参考,具体如下: why 拿到一个人物行走的素材,要用TexturePacker打包.TexturePacker打包后,助于游戏加载图片效率,且比较好管理. 目前得到一张整图,无法直接导入到TexturePacker. what 切片:使用切片将源图像分成许多的功能区域. how 1 ubuntu下图片处理软件 GIMP: 画好参考线后, 点击 滤镜->WEB ->切片 2 python + PIL  (

  • Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】

    Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】

    本文实例讲述了Java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.Fil

  • 微信小程序基于Taro的分享图片功能实践详解

    微信小程序基于Taro的分享图片功能实践详解

    前言 在各种小程序(微信.百度.支付宝).H5.NativeApp 纷纷扰扰的当下,给大家强烈安利一款基于React的多终端开发利器:京东Taro(泰罗·奥特曼),Taro致力于多终端统一解决方案,一处代码,多处运行. Taro支持以React语言开发小程序,支持CSS预处理器,支持实时编译更新,支持NPM,等等等等,简直不要太爽! 微信小程序分享图片功能是经常在小程序业务中出现的,比如学习打卡分享,推广会员分享,推广商品分享等等.因为小程序是不支持直接分享图片到朋友圈的,一般操作为: 生成包含

  • JavaScript前端实现压缩图片功能

    为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节. 压缩效果 首先介绍下压缩的大概流程 通过原生的input标签拿到要上传的图片文件 将图片文件转化成img元素标签 在canvas上压缩绘制该HTMLImageElement 将ca

随机推荐