HTML5通知图像中的圆角

Round corners in HTML5 Notification image

本文关键字：圆角 图像 通知 HTML5      更新时间：2023-09-26

是否可以在HTML5通知中显示圆角图像？

我说的是这个HTML5 API：

new Notification(title, { icon: imageURL });

我认为没有用圆角显示图标的选项。

但一个解决方案可能是通过使用HTMLCanvas创建一个新的图片来使图像具有圆角：

  • 创建一个具有图像宽度和高度的画布元素
  • 在画布元素context.drawImage(img,x,y);上绘制图像
  • 绘制圆角或使用剪辑路径进行剪切
  • 保存图片以用于通知var dataURL = canvas.toDataURL();

编辑：以下是"Web通知"的完整规范：https://dvcs.w3.org/hg/notifications/raw-file/tip/Overview.html-你只能定义一个图像/图标，没有样式属性，所以是的，你必须自己修改图像

相关文章：