把图片的透明部分去掉

问题:
canvas裁剪的图把整个画布都剪下来了,但只要有元素的部分
在这里插入图片描述

// 图像处理

// 把图片的透明部分去掉
export function getImagesRealSize(dataUrl) {
  return new Promise((resolve, reject) => {
    // 将Base64解码为二进制数据
    let binaryString = atob(dataUrl.split(',')[1]); // 去除dataUrl的前部分(例如"data:image/png;base64,")
    let len = binaryString.length;
    let bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }

    // 创建Blob对象
    let blob = new Blob([bytes], {
      type: 'image/png'
    });

    // 创建Image对象
    let img = new Image();
    img.onload = function () {
      // 创建Canvas并设置尺寸
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;

      // 将Image绘制到Canvas
      ctx.drawImage(img, 0, 0);

      // 获取像素数据
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let data = imageData.data;
      let hasData = data.some(item => item !== 0); // 检查是否有非透明像素

      if (hasData) {
        // 确定非透明像素的边界
        let left = canvas.width,
          right = 0,
          top = canvas.height,
          bottom = 0;
        for (let y = 0; y < canvas.height; y++) {
          for (let x = 0; x < canvas.width; x++) {
            let index = (y * canvas.width + x) * 4;
            if (data[index + 3] !== 0) { // 检查alpha通道
              if (x < left) left = x;
              if (x > right) right = x;
              if (y < top) top = y;
              if (y > bottom) bottom = y;
            }
          }
        }

        // 裁剪Canvas到非透明区域
        canvas.width = right - left + 1;
        canvas.height = bottom - top + 1;
        ctx.drawImage(img, left, top, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

        // 导出新的Base64图像数据URL
        let newBase64 = canvas.toDataURL();
        // 获取新的宽和高
        let newWidth = canvas.width;
        let newHeight = canvas.height;

        console.log("🚀 ~ ServersPlugin ~ returnnewPromise ~ newBase64:340", newBase64, newWidth, newHeight)
        resolve({
          base64: newBase64,
          width: newWidth,
          height: newHeight
        });
        // resolve(newBase64);
      } else {
        // 如果没有非透明像素,返回一个空白图像的Base64
        resolve('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
      }
    };
    img.onerror = reject;
    img.src = URL.createObjectURL(blob);
  });
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/762874.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【启明智显活动分享】 启明与你,上海慕尼黑电子展不见不散!

启明与你&#xff0c;上海慕尼黑电子展不见不散&#xff01;&#x1f389; &#x1f50d; 展会现场&#xff0c;你将亲眼目睹RTOS、LINUX、Android全系列方案及产品的精彩展示。从经典到前沿&#xff0c;一站式满足你的技术探索需求。 &#x1f4a1; 更值得期待的是&#xff0…

微信小程序毕业设计-英语互助系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

硬件实用技巧:cadence Aleego创建焊盘过程

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140110911 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

windows USB 设备驱动开发-Host端和Device端

Windows 中的 USB 宿主端驱动程序 下图显示了适用于 Windows 的 USB 驱动程序堆栈的体系结构框图。 此图显示了适用于 USB 2.0 和 USB 3.0 的单独 USB 驱动程序堆栈。 当设备连接到 xHCI 控制器时&#xff0c;Windows 加载 USB 3.0 驱动程序堆栈。 Windows 为连接到 EHCI、OHC…

Windows/Linux/Mac 系统局域网服务发现协议及传输速度比较

简介 分析 / 验证对比常见局域网服务发现协议在 Windows/Linux/Mac 等不同系统下的支持和表现 在使用不同系统的智能硬件时&#xff0c;如常见的树莓派 / Openwrt 路由器 / Debian/Fedora/Windows/Mac 等系统是&#xff0c;系统间相互发现以及网络共享本应是系统的基础服务&a…

【RT摩拳擦掌】基于RT106L/S语音识别的百度云控制系统

【RT摩拳擦掌】基于RT106L/S语音识别的百度云控制系统 一 文档简介二 平台构建2.1 使用平台2.2 百度智能云2.2.1 物联网核心套件2.2.2 在线语音合成 2.3 playback语音数据准备与烧录2.4 开机语音准备与添加2.5 唤醒词识别词命令准备与添加 三 代码准备3.1 sln-local/2-iot 代码…

黑马点评下订单-小程序下单没问题但是Postman发送请求失败了,返回401

经过多方探索&#xff0c;这个✓8错误就是由于黑马点评使用了拦截器&#xff0c;我们直接发送请求是会被拦截器拦截下来的&#xff0c;我给出的解决方案是通过配置Postman解决&#xff0c;方法很简单&#xff01; 解决方案 右边的value写上Redis里面登录所用token值就可以了…

【TB作品】打地鼠游戏,ATMEGA16单片机,Proteus仿真 打地鼠游戏

11个按键LCD1602显示器9个灯蜂鸣器打地鼠小游戏就是九个灯泡&#xff0c;对应九个按键&#xff0c;灯泡有红黄蓝&#xff0c;每间隔一会儿就会亮一个灯&#xff0c;代表地鼠冒出来&#xff0c;按一下按键让灯泡灭掉代表打地鼠&#xff0c;红的三分&#xff0c;黄的两分&#xf…

开发自动发送国际短信的工具需要用到哪些源代码?

在当今数字化、全球化的时代&#xff0c;国际短信作为一种高效、便捷的沟通方式&#xff0c;在各个领域发挥着越来越重要的作用。 开发一款能够自动发送国际短信的工具&#xff0c;不仅能够帮助企业实现精准营销、客户服务&#xff0c;还能为个人提供便捷的跨国交流方式。 本…

手把手教你搭建PyTorch环境:MindStudio中PyTorch模型开发实战

本次实验的视频链接如下&#xff1a;​https://www.bilibili.com/video/BV1iA4y1f7o1/ 本次实验在MindStudio上进行&#xff0c;请先按照 教程 配置环境,安装MindStudio。 ​ MindStudio的是一套基于华为自研昇腾AI处理器开发的AI全栈开发工具平台&#xff0c;该IDE上功能很多…

Leetcode.1735 生成乘积数组的方案数

题目链接 Leetcode.1735 生成乘积数组的方案数 rating : 2500 题目描述 给你一个二维整数数组 q u e r i e s queries queries &#xff0c;其中 q u e r i e s [ i ] [ n i , k i ] queries[i] [n_i, k_i] queries[i][ni​,ki​] 。第 i i i 个查询 q u e r i e s [ i …

AI绘画工具Midjourney:和Discord互相成就

前言 提到文生图&#xff0c;很多人都会想到植根于根植于Discord社区的Midjourney&#xff0c;本篇文章就基于作者的使用体验思考&#xff0c;并结合了Discord来对Midjourney进行探讨&#xff0c;感兴趣的朋友一起来看看吧。 如果要说现在最火的文生图&#xff0c;不得不说到Mi…

深入理解 “androidx.databinding.DataBindingUtil“ 细节和使用

介绍 数据绑定&#xff08;Data Binding&#xff09;是 Android 中的一个强大功能&#xff0c;它允许你使用声明性格式而不是编程方式将布局中的 UI 组件绑定到应用中的数据源。androidx.databinding.DataBindingUtil 类是一个工具类&#xff0c;它提供了用于处理数据绑定的方…

单片机语音识别控制蓝牙通信

基于单片机语音识别控制&蓝牙控制 1、Arduino单片机语音控制1.1 直连1.2 蓝牙无线连接1.3 部分核心程序1.4 实物演示 2、51单片机语音控制2.1 直连2.2 蓝牙无线连接2.3 部分核心程序2.4 实物演示 3、STM32单片机语音控制3.1 直连3.2 蓝牙无线连接3.3 部分核心程序3.4 实物演…

数据结构之“刷链表题”

&#x1f339;个人主页&#x1f339;&#xff1a;喜欢草莓熊的bear &#x1f339;专栏&#x1f339;&#xff1a;数据结构 目录 前言 一、相交链表 题目链接 大致思路 代码实现 二、环形链表1 题目链接 大致思路 代码实现 三、环形链表2 题目链接 大致思路 代码实…

RANSAC空间圆拟合实现

由初中的几何知识我们可以知道&#xff0c;确定一个三角形至少需要三个不共线的点&#xff0c;因此确定一个三角形的外接圆至少可用三个点。我们不妨假设三个点坐标为P1(x1,y1,z1),P2(x2,y2,z2),P3(x3,y3,z3)。 圆方程的标准形式为&#xff1a; (xi-x)2(yi-y)2R2 &#xff08;1…

8605 删数问题

这是一个典型的贪心算法问题。我们可以从高位开始&#xff0c;找到第一个比后面数字大的数字&#xff0c;删除它&#xff0c;然后继续这个过程&#xff0c;直到删除k个数字。如果我们已经删除了k个数字&#xff0c;但是还没有找到一个比后面数字大的数字&#xff0c;那么我们就…

专题六:Spring源码之初始化容器BeanFactory

上一篇咱们通过一个例子介绍初始化容器上下文相关内容&#xff0c;并通过两个示例代码看到了Spring在设计阶段为我预留的扩展点&#xff0c;和我们应该如何利用这两个扩展点在Spring初始化容器上下文阶段为我们提供服务。这一篇咱们接着往下看。 老这样子下回到refresh方法上来…

首款内置电源的迷你主机,不到千元的办公神器 | 零刻EQ13评测报告

零刻首款内置电源的迷你主机&#xff0c;不到千元的办公神器 | 零刻EQ13评测报告 哈喽小伙伴们好&#xff0c;我是Stark-C~ 众所周知&#xff0c;零刻作为目前国产迷你主机第一品牌&#xff0c;旗下系列众多&#xff0c;产线丰富&#xff0c;比如说它有针对游戏玩家的性能主机…

Transformer动画讲解 - 工作原理

Transformer模型在多模态数据处理中扮演着重要角色,其能够高效、准确地处理包含不同类型(如图像、文本、音频、视频等)的多模态数据。 Transformer工作原理四部曲:Embedding(向量化)、Attention(注意力机制)、MLPs(多层感知机)和Unembedding(模型输出)。 阶段一:…