Canvas对ImageData进行Resize操作（平滑高性能处理）

原创 已于 2024-02-22 14:12:08 修改 · 1.9k 阅读 · 5
标签
#前端 #javascript #canvas
于 2023-03-03 17:18:13 首次发布
文章提供了一种高性能的解决方法，通过使用createImageBitmap结合resize参数对ImageData进行缩放，然后在新的canvas上绘制，最后利用getImageData返回缩放后的数据。关键在于使用willReadFrequently选项提升频繁读取getImageData时的速度，以及避免drawImage的图像缺失问题。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

问题背景

通过getImageData函数得到的ImageData通过putImageData重新放到canvas容器无法进行resize操作，如果通过toDataURL函数转为Image再使用drawImage函数性能太差。

解决代码

处理代码出自：https://gist.github.com/mauriciomassaia/b9e7ef6667a622b104c00249f77f8c03

// 输入imageData，resize后的长宽
async function resizeImageData(imageData, width, height) {
   
   
				const resizeWidth = width >> 0
				const resizeHeight = height >> 0
				const ibm = await window.createImageBitmap(imageData

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看
最低0.47元/天 解锁文章
10个提高Canvas性能技巧
06-23
10个提高Canvas性能技巧 很好的 我自己在用的
resize-canvas:更改html5 canvas元素的大小而不会缩放或丢失数据-缩小到裁剪的大小
05-16
调整画布 更改html5 canvas元素的尺寸，从画布上的相对位置调整大小（默认为中心），并保留图像数据 细节 类似如何更改在Photoshop图像的分辨率，但随着精细的控制from位置。 用绝对的新尺寸或相对变化进行调整。 这个新版本调整了画布的大小，而不是返回具有不同大小的新画布。 要获得新的画布，请提供原始画布的副本。 安装 如果尚未下载node，请从下载并安装。 npm install resize-canvas --save 用法 import resizeCanvas from 'resize-canvas' let canvas = document . createElement ( 'canvas' ) // set height and width canvas . width = 300 canvas . height = 200 // add to dom
别再让地图卡了！给Canvas2D加上willReadFrequently，性能警告瞬间消失（Vue3/TypeScript实战）
最新发布
weixin_30872499的博客
03-30 529
本文深入解析Canvas2D性能警告的根源，并提供Vue3/TypeScript实战解决方案。通过设置willReadFrequently属性优化getImageData操作，显著提升地图和图表等可视化应用的渲染性能，消除控制台警告。文章包含原型链修改和模块化补丁两种方案，帮助开发者根据项目需求选择最佳实践。
canvasResize:Javascript Canvas调整大小插件。 它可以与jQuery和Zepto一起使用。 与iOS6和Android 2.3+兼容
04-13
canvasResize canvasResize是用于调整客户端图像大小的插件。 与iOS6兼容。 它可以与jQuery和Zepto一起使用 我使用一些功能修复了iOS6 Safari的大尺寸图像（超过百万像素）的图像文件渲染问题，并通过使用解决了定向问题 您可以使用插件轻松更改图像大小和质量。 经过测试： Chrome（24.0.1312.56） 谷歌浏览器（25.0.1364.68 beta） 歌剧（12.14） iOS 6.1.2 您可以在上进行。 用法 $('input[name=photo]').change(function(e) { var file = e.target.files[0]; canvasResize(file, { width: 300, height: 0, crop: fal
Canvas性能优化
weixin_34311757的博客
09-21 1666
最近对 html5小游戏有点兴趣，因为我感觉将来这个东西或许是前端一个重要的应用场景，例如现在每到某些节假日，像支付宝、淘宝或者其他的一些 APP可能会给你推送通知，然后点进去就是一个小游戏，基本上点进去的人，只要不是太抵触，都会玩上一玩的，如果要是恰好 get到用户的 G点，还能进一步增强业务，无论是用户体验，还是对业务的发展，都是一种很不错的提升方式。 另外，我说的这个 html5小游戏是包括...
Chrome warning willReadFrequently attribute set to true
suiusoar
10-13 1257
"Chrome 警告：willReadFrequently 属性设置为 true"
Canvas学习笔记（一）
哈哈哈哈哈哈嗝～
06-10 2909
本文旨在记录自己学习Canvas中遇到的一些觉得有必要记下来的知识点。一.getContext()方法MDN上的定义： canvas.getContext(contextType, contextAttributes); contextType参数有以下四种： “2d”,创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。 “webgl”(“experimental-
Multiple readback operations using getImageData are faster with the willReadFrequently attribute set
qq_59625204的博客
09-14 6830
HTML Canvas2D中的willReadFrequently属性是一个布尔值，用于控制是否将图像数据缓存在GPU内存中，当设置为true时，浏览器会尽量将图像数据缓存在GPU内存中，从而提高多个getImageData读取操作的速度。HTML Canvas2D：设置willReadFrequently属性为true可加快多个getImageData读取操作的速度。
有关Canvas的一点小事—canvas和resize
weixin_30915275的博客
01-15 908
　　之前就说了canvas设置大小的时候用的就是设置实打实的像素值，像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小。不过项目之前有用到过，既然去了解了，就记下来防止忘记。 不能自己适应，就只能每次外部容器发生改变的时候给它重新设置大小了。 1、 $(selector).resize()—布局调整大小的时候触发 　　...
使用CanvasResize优化图像处理：一个高效且灵活的解决方案
gitblog_00022的博客
04-27 608
使用CanvasResize优化图像处理：一个高效且灵活的解决方案 项目简介 是由Goker Cebecci开发的一个轻量级JavaScript库，它的主要目标是帮助开发者以高效率、高质量的方式调整图像大小。该项目旨在解决在Web应用中，尤其是在响应式设计中，对图片进行动态缩放时可能会遇到的性能问题。 技术分析 CanvasResize利用HTML5的 <canvas> 元素来进行图像...
html学习笔记，canvas多次resize图片质量变差问题，canvas缩放，canvas内部图片缩放
m0_37542524的博客
06-26 660
1，效果展示 2，代码干货 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style> html, body{ width:100%; height:100%; } .main-area{ position:absolute; height:80%.
如何解决[Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequentl
qq_43582112的博客
04-23 4029
getImageData` 时，浏览器可能会进行一些额外的优化，例如缓存像素数据或减少不必要的重绘操作，从而提高性能。属性来优化频繁的像素数据读取操作，从而提高性能。希望这些示例对你有帮助！如果有其他问题，请随时告诉我。以下是一个完整的示例，-konva。通过这种方式，你可以利用。你可以通过以下方式设置。
html学习笔记，canvas多次resize图片质量变差问题，canvas缩放，canvas内部图片缩放，图片加载时缩放
m0_37542524的博客
06-26 647
文章目录1，效果展示2，代码干货 canvas加载图片时，宽高与父元素相差不大时，父元素也会自动开启滚动条。如：https://blog.csdn.net/m0_37542524/article/details/118251630?spm=1001.2014.3001.5501 解决办法，图片加载时，不原图加载，而是缩放为当前显示接口最大显示界面 1，效果展示 2，代码干货 <!DOCTYPE html> <html> <head> <meta ch
canvas图像绘制（图像放大、缩小、拖动和截图）
热门推荐
qq_39404437的博客
08-06 2万+
1、canvas略解林大大又来更新啦~这次主要做的是关于canvas图像绘制的部分，要实现的功能主要是绘制、对canvas的放大以及那我们先来大概了解下canvas：1、canvas略解宽高是必须加上的，当然你也可以选择动态宽高，可以设置宽高百分比喔，canvas用于在页面上绘制图像（可以是自己的图片，也可以绘制自定义矢量图形：矩形等），其实我们不用担心大量的重绘canvas，现在浏览器完全扛得住这压力，非常流畅丝滑。
canvas中遇到的一些问题汇总
weixin_43801564的博客
11-29 3005
canvas中遇到的一些问题汇总 1、canvas中绘图API中使用的尺寸一致，但是长度效果都不一样 在canvas的本身画布的大小只能通过canvas标签中的width和height进行设置。如果同时对canvas的css样式进行设置，会对canvas进行缩放，就好比对一张图片进行样式处理一样，会将其本身的尺寸缩放至我们设置的尺寸。 &amp;lt;canvas class=&quot;canvas&quot;width=...
Canvas2D
qq_34754747的博客
11-17 325
在着色器、网格和滤镜的世界中，Canvas2D 可能不会让您兴奋。不可否认，在最先进的 2D 绘图方面，API 有点落后于时代。幸运的是，我们一直在努力在 Canvas2D 中实现新功能，以赶上 CSS、简化人体工程学并提高性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alex-Leung

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值