在画布上图像的不透明部分周围绘制边框

2023-12-23

我正在使用以下方法在画布上绘制图像drawImage。它是一个被透明像素包围的 PNG,如下所示:

如何向画布上该图像的可见部分添加纯色边框?澄清一下:我不想要一个围绕图像边界框的矩形。边界应该围绕草地。

我确实考虑过使用阴影,但我并不真正想要发光的边框,我想要一个实心的边框。


有点晚了,但只是画出图像offset这比分析边缘要快得多:

var ctx = canvas.getContext('2d'),
    img = new Image;

img.onload = draw;
img.src = "https://i.stack.imgur.com/UFBxY.png";

function draw() {

  var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
      s = 2,  // thickness scale
      i = 0,  // iterator
      x = 5,  // final position
      y = 5;
  
  // draw images at offsets from the array scaled by s
  for(; i < dArr.length; i += 2)
    ctx.drawImage(img, x + dArr[i]*s, y + dArr[i+1]*s);
  
  // fill with color
  ctx.globalCompositeOperation = "source-in";
  ctx.fillStyle = "red";
  ctx.fillRect(0,0,canvas.width, canvas.height);
  
  // draw original image in normal mode
  ctx.globalCompositeOperation = "source-over";
  ctx.drawImage(img, x, y);
}
<canvas id=canvas width=500 height=500></canvas>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在画布上图像的不透明部分周围绘制边框 的相关文章

  • 通过单击堆叠条形图打开选项卡

    我正在使用 R 构建一个包含转发的堆积条形图 ggplot and plotly 如果单击条形图的一部分 我希望打开一个新的浏览器选项卡并显示该特定日期的推文以及指定的转发量 但是 当我单击下面示例中的其中一个栏时 会打开一个不同的链接 表
  • 粘性页脚不粘在 AngularJS 中

    Im working an angular site and im trying to implement a sticky footer across all views but the footer stops sticking whe
  • OpenCV Python 删除图像中的某些对象

    我正在使用带有 opencv 和 numpy 的 python 来检测天文中的星星 例如这个1 https i stack imgur com AKwEJ jpg图片 使用模板匹配 我可以用阈值检测星星 单击 2 2 https i sta
  • d3 树 - 有相同孩子的父母

    我一直在将代码从 JIT 转换为 D3 并使用树布局 我已经复制了代码http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk
  • JavaScript 中的 ParseFloat 函数

    当我添加两个文本框值时1 001 and 0 001然后我做了一个parseFloat I get 1 0019999999 我要它1 002 你能帮助我吗 JavaScriptNumber http www w3schools com j
  • javascript中.match和.test有什么区别[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 在浏览 JavaScript 时 我刚刚遇到了 match test 和 exec有什么不同 这是最快的 首先 exec and test
  • 匹配CSS的正则表达式“<属性>:<值>”

    我从以下位置检索了 CSS 规则document styleSheets现在我正在寻找提取它的属性和值 cssText expl position absolute background color rgb 204 204 204 max
  • Android - 带图像的按钮 - 禁用按钮时图像变暗

    在 Android 中 我有一个包含图像和文本的按钮 禁用该按钮时 文本会自动变灰 但图像保持不变 当按钮被禁用时是否可以使图像变暗而不需要两个单独的图像 在您的代码中 您还可以使用彩色滤光片 http developer android
  • 如何按日期升序对对象进行排序?

    如果我有一个对象列表 var objectList LIST OF OBJECT each object列表中包含三个属性 name date gender 如何按 对列表中的对象进行排序date 属性升序 the date 属性包含字符串
  • Antd datepicker (date.clone/date.load 不是函数)

    我有一个反应应用程序 有一个复选框可以禁用日期选择器 但当我使用复选框禁用它时 我无法选择任何日期 如果我删除复选框及其功能 则不会出现错误 目前 我得到 date clone 不是函数 error const dateFormat YYY
  • 如何在 d3.js 中填充 svg 圆圈内的图像

    这是我在 svg 中填充圆圈的代码 var svgContainer d3 select body append svg attr width 1000 attr height 1000 var circles svgContainer s
  • 当 eslint 从子文件夹运行时无法解析相对模块路径

    当我从存储库的根文件夹运行 eslint 时 一切运行正常 没有错误 但是当我从子文件夹运行时 我会得到大量导入 未解决的问题 而当我从根目录运行时则不会发生这种情况 reporoot subfolder0 subfolder1 MyFil
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • 需要将焦点放在react中的div上

    我有一个之前用 H1 标签包裹的文本 页面加载后 我需要专注于该文本 为了方便起见 我将它包装在 div 中 render const translate billing primaryContactSelection true this
  • 如何使 Meteor 上的服务器可以访问文本文件

    我很惊讶我无法在这里搜索我的答案 似乎没有其他人遇到这个问题 当您运行meteor服务时 js html等被打包在 meteor local build文件夹中 但它似乎排除了不是js或html的内容 我有一个名为 magicsets 的文
  • 掩码输入数字 - 百分比

    如何通过 jQuery 创建具有百分比的数字掩码输入 我是否让输入仅接受三个数字 并在用户完成输入时在数字后添加百分号 keyup 我不使用插件 例子 1 Or 30 Or 99 Or 100 Or 200
  • 在 gulp 和 browsersync 问题中观看新文件

    我使用 browsersync 在文件更改时重新加载浏览器 而且它工作完美 但是当我创建新文件 例如 html scss js 时 bowsersync 不起作用 如何解决这个问题 gulpjs Browser Sync gulp task
  • 如何创建浏览器插件?

    我必须创建一个插件 当用户将鼠标悬停在某些术语上时 该插件必须显示信息 谁能告诉我如何做的方向 我对创建插件没有太多想法 我知道我想要做的事情可以通过java脚本来完成 但是java脚本文件可以作为浏览器插件安装吗 任何对此的想法将不胜感激
  • 使用 cvcreateimage 使用 opencv 创建简单的黑色图像

    来自 OpenCV 新手的非常基本的问题 我只想创建一个图像 每个像素设置为0 黑色的 我在 main 函数中使用了以下代码 IplImage imgScribble cvCreateImage cvSize 320 240 8 3 我得到
  • javascript初学者:在javascript中添加动态样式? [复制]

    这个问题在这里已经有答案了 可能的重复 如何使用 Javascript 创建 标签 https stackoverflow com questions 524696 how to create a style tag with javasc

随机推荐

  • 获取 CFNetwork SSLHandshake 失败 (-9806) 错误

    我正在尝试使用调用我的网址 NSDictionary landingDetails appDelegate landingPage NSString devinf UIDevice currentDevice systemVersion N
  • Cassandra CQL3 导入 CSV

    背景 我创建了一个名为AvailableDomains 的架构 简单策略 1 个节点 在该键空间中 我创建了 1 个表 列族 称为包含列 id urn 时间戳 标志 的域 除时间戳之外的所有类型文本都是时间戳类型 我启动cassandra
  • 视频元素上出现不需要的边框[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在尝试
  • 如何用webpack+react渲染图像?

    我对 React 和 Webpack 还很陌生 我遇到了这个我不明白的奇怪问题 问题 当我检查图像时 上面是我看到的 显然没有显示我的图像 我正在使用文件加载器 我的结构 网页包 const path require path const
  • R 中 KerasR LSTM 的数组转换

    为了在 KerasR 中使用 LSTM 我必须转换我的 NumericMatrix 335 x 1515 我想我在这里找到了解决方案https stats stackexchange com questions 274478 underst
  • rgl.snapshot() 不再有效

    我刚刚将 R 和 rgl 升级到以下版本 现在 rgl snapshot 不再起作用 它在以前的版本中有效 有没有解决的办法 R版本2 12 1 2010 12 16 rgl 版本 0 92 798 gt library rgl gt x
  • 从Dictionary中高效获取IReadOnlyDictionary

    public class Flea Animals var fleas new Dictionary
  • 是否可以使用 Nokogiri 解析样式表?

    我花了两个小时在谷歌上搜索这个问题 但找不到任何好的答案 所以让我们看看人类是否可以击败谷歌计算机 我想用 Ruby 解析样式表 以便可以将这些样式应用到文档中的元素 使样式内联 所以 我想采取类似的东西 并能够将其提取到某种 Nokogi
  • json.net - 如何仅在根对象上添加属性 $type

    我想修改我的 json NET 序列化器 以仅将 type 属性添加到实现给定接口的对象 而不添加到任何属性或嵌套对象 使用 TypeNameHandling Auto 默认 PropertyA 123 PropertyB foo Prop
  • Netty closeFuture().sync().channel();块休息 API

    我正在学习 Netty 并开始使用 Spring Boot 一些教程 我的目标是创建一个应用程序 该应用程序设置一个 TCP 端口来接收消息并通过 REST API 呈现它们 大多数教程都说我应该添加这样的东西 serverChannel
  • 如何将 VoiceOver 辅助功能添加到应用程序的图标徽章编号?

    问题 如何添加自定义 VoiceOver 辅助功能Label or Hint到应用程序 图标徽章编号 例如 当iOS设置Accessibility gt VoiceOver被转动On VoiceOver 会大声朗读屏幕上触摸的项 目 对于
  • PE文件如何映射到内存中?

    这几天我一直在研究PE格式 还有几个问题 数据部分是否被映射到进程的内存中 或者程序是否从磁盘中读取它 如果它确实被映射到内存中 那么进程如何获取该部分的偏移量 以及其他部分 有没有什么方法可以获取已映射到内存中的进程的入口点 而不触及磁盘
  • Excel 的 VBA 代码。如何在单独的工作表中创建图表?

    我有一个关于如何使用 vba 代码自动创建绘图 图表 的问题 我可以有一个包含两种列的 Excel 文档 可分为 6 列或可分为 7 列 前两张图片代表我如何接收 Excel 文档 我要做的是 Step 1 复制 A 列并将其放在每组 6
  • 为什么 Dragstart 中的 event.preventDefault() 会中断进一步的拖动事件的执行?

    我正在尝试拖动图像 并且为了停止浏览器的默认图像拖动 我正在使用 event preventDefault 但由于某种原因 它会中断其他事件的执行 例如dragenter dragover dragend等 为什么会这样以及如何在不中断正常
  • 小于与。等于 C/C++ 效率

    当我使用旧的 API 时 例如 Unix 上的 C 套接字 API 我总是注意到人们喜欢小于 lt 大于等于 在比较它们的错误返回值时 int result send if result lt 0 perror 在我提到的情况下 返回码只能
  • Web api 控制器方法在序列化 Stream 对象时出现异常

    我有一个 web api 控制器方法如下 HttpPost public string PostMethod int id Stream downloadStream Service downloadStream id JavaScript
  • 如何在 asp.net web api 中启用 cors 选项?

    如何启用 CORS 选项asp net网络API 我安装了这个包Microsoft AspNet WebApi Cors来自 nuget 的 CORS 支持 但是 我收到一条错误消息 指出IAppBuilder不包含定义app useCor
  • 使用 python 字典理解进行重构

    我有 2 个字典 其中包含相同的键 但值对不同 让我们让 dictA 和 dictB 代表相关的两个字典 dictA key1 Joe key2 Bob dictB key1 Smith key2 Johnson 目前 我正在通过嵌套 if
  • 如何获取数组包含特定值的子项

    我有一个数据库方案 其本质上是相同的文档 https firebase google com docs database ios structure data fanout An index to track Ada s membershi
  • 在画布上图像的不透明部分周围绘制边框

    我正在使用以下方法在画布上绘制图像drawImage 它是一个被透明像素包围的 PNG 如下所示 如何向画布上该图像的可见部分添加纯色边框 澄清一下 我不想要一个围绕图像边界框的矩形 边界应该围绕草地 我确实考虑过使用阴影 但我并不真正想要