pixi.js 导出部分区域裁剪图片

2023-11-13

方案

先通过api到出image对象,在通过canvas绘制图片,在导出数据

代码

const { x, y } = this.app.stage.getBounds() // 超出的x,y
const stageImage = this.app.renderer.plugins.extract.image(this.app.stage, "image/jpeg", 1)
stageImage.onload = () => {
  const canvasElement = document.createElement('canvas')
  const ctx: any = canvasElement.getContext('2d')
  canvasElement.width = this.width
  canvasElement.height = this.height
  ctx.drawImage(stageImage, -x, -y, this.width, this.height, 0, 0, this.width, this.height)
  const data = canvasElement.toDataURL("image/jpeg")
  const download = document.createElement('a')
  download.href = data
  download.download = '测试图片'
  download.click();
  download.remove()
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

pixi.js 导出部分区域裁剪图片 的相关文章

随机推荐

  • 解决MySQL版本与JDBC驱动版本不对应导致的错误

    我的MySQL版本是5 7 21的 对应的JDBC驱动应该是mysql connector java 5 1 46 bin jar 如果使用低版本的驱动 就会出现如下错误 HTTP Status 500 javax servlet Serv
  • .exe已停止工作_R027---Uipath调用python程序的exe

    一 缘起 看到不少朋友问Uipath调用python的方法 这里说一个方法 调用python程序编译后的exe 其他开发语言的程序也可以这么调用 由于调用的是exe文件 所以 其实没有用到UiPath Python Activities 用
  • Ubuntu常用命令大全

    转自 https www jb51 net os Ubuntu 56362 html 一 文件 文件夹管理 ls 列出当前目录文件 不包括隐含文件 ls a 列出当前目录文件 包括隐含文件 ls l 列出当前目录下文件的详细信息 cd 回当
  • 层次分析法的理解

    AHP 层次分析法 层次分析法的特点 基本概念 重要性表 判断矩阵 为什么要引入判断矩阵呢 判断矩阵的特点 一致矩阵 为什么要定义一致矩阵呢 一致矩阵的特点 一致矩阵的引理 一致性检验的步骤 判断矩阵计算权重 算术平均法求权重 几何平均法
  • 一个很好用的小控件----给所有view右上角添加数字(类似未读消息之类的)

    下面这种效果 Badge 用法很简但 见下面的demo Created by Fangchao on 2015 2 25 EActivity R layout activity usercenter public class UserCen
  • 软件测试及原则

    软件测试 英语 software testing 描述一种用来促进鉴定软件的正确性 完整性 安全性和质量的过程 换句话说 软件测试是一种实际输出与预期输出间的审核或者比较过程 软件测试的经典定义是 在规定的条件下对程序进行操作 以发现程序错
  • 几种压缩算法

    一 行程长度压缩 原理是将一扫描行中的颜色值相同的相邻像素用一个计数值和那些像素的颜色值来代替 例如 aaabccccccddeee 则可用3a1b6c2d3e来代替 对于拥有大面积 相同颜色区域的图像 用RLE压缩方法非常有效 由RLE原
  • Java多线程:线程8锁案例分析

    线程8锁案例分析 通过分析代码 推测打印结果 并运行代码进行验证 1 两个线程调用同一个对象的两个同步方法 被synchronized修饰的方法 锁的对象是方法的调用者 因为两个方法的调用者是同一个 所以两个方法用的是同一个锁 先调用方法的
  • 编译filament

    从github上下载github 每次都被中断 于是灵机一动 从码云上下载1 8下载 果然速度快 先cmake 发现需要python 把enable java去掉 编译后试试 hellopbr
  • nginx系统学习5--常用配置4--防盗链配置

    6 4 防盗链配置 6 4 1 操作 01 配置 server listen 7000 server name www test com www test1 com root html www test location index tes
  • PTA数组2

    目录 1 方阵对角线元素求和及计数 2 使用选择法升序 3 输入10个正整数到a数组中 对a 10 数组中的素数升序排序 4 对a 10 数组中的素数排序 1 方阵对角线元素求和及计数 对输入的一个N N的方阵 求其两条对角线上的元素之和及
  • Excel根据身份证号提取省份

    身份证号码各位的含义 1 2位省 自治区 直辖市代码 3 4位地级市 盟 自治州代码 5 6位县 县级市 区代码 7 14位出生年月日 比如19670401代表1967年4月1日 15 17位为顺序号 其中17位 倒数第二位 男为单数 女为
  • 关于多线程的爬取心得和用法

    最近爬取一些学习上所要用到的东西 因为要搞得东西比较多 写的爬取的速度大大下降 于是我就尝试提升以下程序爬取的速度 正好学过多线程 灵机一动就搞了个多线程的程序爬取 此次没有啥好说的 有啥不懂请看注释 import queue import
  • (Java 功能篇) Java Proxool

    本文题目没有强调的是Java应用 不是Java Web应用 原因是从网上找有关Proxool的例子 全是一个摸样 都是将讲解Java Web中的应用 真没劲 难道Proxool离开了web就不能用了 不信你可以google一把看看 在阅读了
  • 定时器之编码器模式

    1 什么是编码器 编码器 encoder 是将信号或数据进行编制 转换为可用以通讯 传输和存储的信号形式的设备 编码器把角位移或直线位移转换成电信号 前者称为码盘 后者称为码尺 2 分类 按照读出方式编码器可以分为接触式和非接触式两种 按照
  • [转]IDEA中使用Debug

    一 Debug开篇 首先看下IDEA中Debug模式下的界面 如下是在IDEA中启动Debug模式 进入断点后的界面 我这里是Windows 可能和Mac的图标等会有些不一样 就简单说下图中标注的8个地方 以Debug模式启动服务 左边的一
  • VS环境下,关于“找不到 **.dll,无法执行代码,重新安装程序可能会解决此问题。”的四种解决方案

    dll 是动态链接库文件 里面存储着函数和数据 lib是静态数据连接库文件 存储着函数名和文件位置 也就是说在执行程序时 exe文件可通过lib文件找到dll文件 并执行在程序中调用的函数 Windows在查找dll文件会按照以下几种方式顺
  • 被动遥感和主动遥感的概念辨析

    主动遥感 主动遥感 又称有源遥感 有时也称遥测 指从遥感平台上的人工辐射源 向目标物发射一定形式的电磁波 再由传感器接收和记录其反射波的遥感系统 其主要优点是不依赖太阳辐射 可以昼夜工作 而且可以根据探测目的的不同 主动选择电磁波的波长和发
  • CSS > Flex 布局中的放大和收缩计算

    原文 https dev opera com articles flexbox basics 译者注 本文仅简单翻译下原文中关于如何计算 flex 属性的值的部分 其他有关 Flex 布局的知识本文不作探讨 2015 12 5更新 关于 f
  • pixi.js 导出部分区域裁剪图片

    方案 先通过api到出image对象 在通过canvas绘制图片 在导出数据 代码 const x y this app stage getBounds 超出的x y const stageImage this app renderer p