canvas ImageData 删除白色像素

2024-03-24

我有一些 html 图像有白色背景。我需要删除白色背景。我想我可以使所有白色像素透明,但我不知道该怎么做。我只想使用 html/javascript。


这是如何做到的..

function white2transparent(img)
{
    var c = document.createElement('canvas');

    var w = img.width, h = img.height;

    c.width = w;
    c.height = h;

    var ctx = c.getContext('2d');

    ctx.drawImage(img, 0, 0, w, h);
    var imageData = ctx.getImageData(0,0, w, h);
    var pixel = imageData.data;

    var r=0, g=1, b=2,a=3;
    for (var p = 0; p<pixel.length; p+=4)
    {
      if (
          pixel[p+r] == 255 &&
          pixel[p+g] == 255 &&
          pixel[p+b] == 255) // if white then change alpha to 0
      {pixel[p+a] = 0;}
    }

    ctx.putImageData(imageData,0,0);

    return c.toDataURL('image/png');
}

并使用它设置src图像的值为此方法的返回值。

var someimage = document.getElementById('imageid');
someimage.src = white2transparent(someimage);

http://jsfiddle.net/gaby/UuCys/ http://jsfiddle.net/gaby/UuCys/


为了使此代码正常工作,图像必须来自与代码相同的域(出于安全原因).

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

canvas ImageData 删除白色像素 的相关文章

随机推荐

  • 动态渲染 React 风格组件时消除警告

    我在浏览器控制台中收到以下警告 react devtools backend js 3973 The component styled div with the id of sc dmRaPn has been created dynami
  • 作为类属性的变体类型的 VBA 数组

    我有一个处理多个数值数组 双精度类型 的类 并且还需要处理一个描述符数组 其中包括字符串和整数的混合 需要相应地用作字符串和数字 所以我决定创建一个变体类型的数组属性 不是包含数组的变体 但这似乎不起作用 而双精度数组却可以 具体来说 这种
  • Emacs - 无法使缓冲区提供保存工作

    当缓冲区未与文件关联时 我想让 Emacs 询问我是否要保存修改后的缓冲区 要打开新缓冲区 不访问文件 我的 emacs 文件中有以下函数 Creates a new empty buffer defun new empty buffer
  • Visual Studio - 使用从现有源创建项目向导时使用新筛选器而不是新文件夹

    我使用了 Visual Studio 2008 的从现有代码创建项目向导 但显然以这种方式创建的项目不允许您创建虚拟解决方案文件夹 而只允许您创建实际的系统文件夹 我想要标头文件 资源文件和源文件的标准项目设置 但我似乎无法创建所需的虚拟文
  • 如何在 MATLAB 中找到数组中的最大值及其索引?

    假设我有一个数组 a 2 5 4 7 返回最大值及其索引的函数是什么 例如 在我的例子中 该函数应返回 7 作为最大值 4 作为索引 函数是max 要获得第一个最大值 您应该这样做 val idx max a val是最大值并且idx是它的
  • Laravel Eloquent,仅选择存在关系的行

    我正在尝试从表中进行选择 但我只想选择具有现有关系的内容 例如 如果我有用户和评论 并且用户有很多评论 我想做类似的事情 User hasComments gt paginate 20 因此 我只想选择至少有 1 条评论的用户 并对该查询的
  • 更新到依赖项 24.2.0 后,在两个布局之间使用 FloatingActionButton 的渲染问题停止工作

    正如我在问题中提到的 我的 FloatingActionButton 位于两个布局之间 请检查经典示例here https stackoverflow com questions 24459352 how can i add the new
  • 如何让 Pylint 识别 NumPy 成员?

    我正在 Python 项目上运行 Pylint Pylint 多次抱怨无法找到 NumPy 成员 如何避免这种情况 同时避免跳过会员资格检查 从代码来看 import numpy as np print np zeros 1 4 当运行时
  • 如果使用双斜杠设置 会发生什么?

    我喜欢了解如何使用对我的网络爬虫来说很有价值 所以我用主要浏览器测试了几种组合 最后发现了一些我不明白的带有双斜杠的东西 如果您不喜欢阅读所有内容 请跳至测试结果D and E 所有测试演示 http gutt it basehref ph
  • 在 SQL 中从数据库表中删除除前 n 之外的所有内容

    从 sql 中的表中删除所有行但保留顶部的 n 行的最佳方法是什么 DELETE FROM Table WHERE ID NOT IN SELECT TOP 10 ID FROM Table Edit Chris 带来了良好的性能提升 因为
  • 请求范围的 bean 和数据模型初始化?

    更新二 好的 我设法缩小了范围 我有一个带有数据表的页面 具有排序和过滤功能 两者都发生在数据库中 换句话说 我不使用我使用的 rich datatable 的嵌入式功能 而是让 DB 来完成工作 我与请求范围豆子 唯一的会话范围 bean
  • 如何可靠地获取 C 风格数组的大小?

    如何可靠地获取 C 风格数组的大小 经常推荐的方法似乎是使用sizeof 但它不起作用foo函数 其中x传入 include
  • std::cin 用于双精度和字符串

    我正在做货币兑换练习 程序应从输入流中读取货币的金额和名称 并以本国货币返回其值 double amount 0 0 std string currency std cout lt lt Please enter amount and cu
  • 此 Blade 卫生系统是否正常工作(双花括号与三花括号)?

    很抱歉 这很可能是我自己的误解 而不是实际存在的问题 我对 Laravel 和 Blade 模板相当陌生 我正在尝试输出从Input get 然而 当我通过双花括号和三花括号输出字段时 输出之间似乎没有区别 这是我的观点的摘录 data I
  • 如何模拟作为函数的 Angular 服务?

    我们有一个所谓的CORShttpService 这基本上是一个包装 httpservice 但是封装了一些我们需要的CORS功能 我现在正在为具有以下功能的服务编写一些测试CORShttpService注入其中 该服务的代码如下 CORSh
  • 如何在 Kotlin 中使用堆栈?

    如何在 Kotlin 中使用 Stack 来自 java 或者还有其他替代方案吗 我正在尝试将列表转换为堆栈 科特林 1 3 70介绍了kotlin collections ArrayDeque https kotlinlang org a
  • 来自 Node.js BigQuery 客户端库的更详细错误消息

    我用的是官方的与 BigQuery 的 Google Node 连接器 https github com googleapis nodejs bigquery 我有以下片段将记录流式传输到数据库中 module exports sendTo
  • 在 Angular JS 中解码 HTML 实体

    如何使用 Angular JS 解码文本中的 HTML 实体 我有字符串 quot 12 10 On Going Submission of quot quot Made Up quot quot Samples quot 我需要一种使用
  • Android Jack 编译器未从 proguard 规则中删除日志

    我尝试过使用 assumenosideeffects class android util Log public static boolean isLoggable java lang String int public static in
  • canvas ImageData 删除白色像素

    我有一些 html 图像有白色背景 我需要删除白色背景 我想我可以使所有白色像素透明 但我不知道该怎么做 我只想使用 html javascript 这是如何做到的 function white2transparent img var c