- 综合排序
- 最热优先
- 最新优先
- 来自专栏计算机图形学 前端可视化 WebGL
OffscreenCanvas-离屏canvas使用说明 ImageBitmapcreateImageBitmap创建OffscreenCanv
ImageBitmap ImageBitmap对象表示能够被绘制到 canvas上的位图图像，具有低延迟的特性。 函数 ImageBitmap.close() 释放ImageBitmap所相关联的所有图形资源。 = offscreen.transferToImageBitmap(); postMessage({imageBitmap:imageBitmap},[imageBitmap]); } 在主线程中 把imageBitmap对象传递给主线中。 主线程接收到imageBitmap对象之后，把imageBitmap绘制到canvas对象上。
5.1K21发布于 2020-05-12 - 来自专栏鸿蒙开发实践
鸿蒙OS创新实践：动态声控话筒开发指南
最后效果：代码示例：private img: ImageBitmap = new ImageBitmap("image/img.png");private img2: ImageBitmap = new ImageBitmap("image/img_1.png");二、理解绘制所需类为了实现动态效果，我们需要了解并使用一些关键的类和对象。 (this.settings); private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600); private img: ImageBitmap = new ImageBitmap("image/img.png"); private img2: ImageBitmap = new ImageBitmap("image/img_1.png");
14300编辑于 2025-06-22 分享之前使用HarmonyOS NEXT Canvas做的动态GIF视频的一个案例，没有感情，全是技术。
最后都通过 ImageBitmap 方法将图片存储为 canvas 渲染的像素数据。非常方面，在 H5 还要担心跨域之类的问题。 w: number = 400; // 编程画板的宽度 @State h: number = 760; // 编程画板的尺寸 @State levelList: any[] = [ new ImageBitmap ('common/images/icon0.png'), new ImageBitmap('common/images/icon1.png'), new ImageBitmap('common /images/icon2.png'), new ImageBitmap('common/images/icon3.png'), new ImageBitmap('common/images /icon4.png'), new ImageBitmap('common/images/icon5.png'), new ImageBitmap('common/images/icon6.
32510编辑于 2025-03-14- 来自专栏腾讯位置服务
基于 WebGL实现自定义栅格图层踩坑实录
ImageBitmap表示位图图像，用于在canvas中绘制图像，相比较于Image 其延迟较低，因为在执行texSubImage2D 将Image 绘制到纹理上时也会先将其转为ImageBitmap： ——《高性能 WebGL —— 使用 ImageBitmap 提升纹理性能》（http://www.jiazhengblog.com/blog/2019/03/24/3407/） 同时 WebGL 规范里对 时，明确说明了其对ImageBitmap 无效，只能在创建 ImageBitmap 的时候就进行相应设置： If the TexImageSource is an ImageBitmap, then these Instead the equivalent ImageBitmapOptions should be used to create an ImageBitmap with the desired format 如果上传的图像是ImageBitmap对象，则在其创建时可通过 ImageBitmapOptions中的 imageOrientation、premultiplyAlpha、colorSpaceConversion
1.5K71发布于 2020-07-03 正品库拍照PWA应用的实现与性能优化｜得物技术
ImageBitmap 直接创建策略在绘制中，如果 imageData 是普通的 Image 或 Canvas，每次 drawImage 都可能涉及格式转换和内存拷贝，无疑增大了内存支出。 直接从视频流创建ImageBitmap，跳过Canvas中间步骤。... let imageBitmap: ImageBitmap | null = null;// 判断是否为视频元素，如果是则尝试直接创建ImageBitmap// 支持img 和 vedioif ((source '); // 直接从视频元素创建ImageBitmap，跳过Canvas中间步骤 if (source instanceof HTMLVideoElement) { imageBitmap = await createImageBitmap(source); } console.log('直接创建ImageBitmap成功!!')
36900编辑于 2025-07-03- 来自专栏万少的技术分享
鸿蒙元服务实战-笑笑五子棋（3）
createPattern createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | null 通过指定图像和重复方式创建图片填充的模板 参数名 类型 必填 说明 image ImageBitmap 是 图源对象，具体参考 ImageBitmap 对象。 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private img: ImageBitmap = new ImageBitmap("/images/2.png") build() { Flex({ direction: FlexDirection.Column, alignItems = new ImageBitmap("/images/2.png") build() { Flex({ direction: FlexDirection.Column, alignItems
27600编辑于 2025-02-10 - 来自专栏万少的技术分享
鸿蒙元服务实战-笑笑五子棋（2）
是 图片资源，请参考 ImageBitmap 或 PixelMap。 image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。 sy number 是 裁切源图像时距离源图像左上角的 y 坐标值。 image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。 sw number 是 裁切源图像时需要裁切的宽度。 image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。 sh number 是 裁切源图像时需要裁切的高度。 image 类型为 ImageBitmap 时，默认单位：vp。image 类型为 PixelMap 时，单位：px。 dx number 是 绘制区域左上角在 x 轴的位置。默认单位：vp。
72010编辑于 2025-02-10 - 来自专栏用户4773577的专栏
鸿蒙Next画布Canvas基础使用演示
CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); @Local canvasLength:number=300 private img: ImageBitmap = new ImageBitmap('resource://base/media/reba.png'); build() { Column({space:10}){ Canvas(this.context Row({space:10}){ Button('绘制原图').onClick(()=>{ this.context.drawImage(new ImageBitmap 0) }) Button('200*50').onClick(()=>{ this.context.drawImage(new ImageBitmap 绘制区域左上角在y轴的位置 //绘制区域的宽度 //绘制区域的高度 this.context.drawImage(new ImageBitmap
26510编辑于 2025-06-28 - 来自专栏鸿蒙开发笔记
OpenHarmony 实战开发——ArkUI之Canvas组件
获取绘图对象 private ctx: RenderingContext = new RenderingContext(this.settings);//列出所要用到的图片 private img:ImageBitmap = new ImageBitmap("common/bg.jpg"); build() { Column() { //创建canvas Canvas(this.ctx) 将图片渲染到 canvas 画布上let img:ImageBitmap = new ImageBitmap("图片路径（如common/images）/"+this.imgList[数组下标]);this.ctx.drawImage let img:ImageBitmap = new ImageBitmap("common/img"+this.imgList[Efight]);this.ctx.drawImage(img, 0, this.Eheight
50820编辑于 2025-04-10 - 来自专栏学习
Android开发学习—调用摄像头权限拍照
= null && extras.containsKey("data")) { Bitmap imageBitmap = (Bitmap) extras.get(" // 将Bitmap显示在ImageView中 binding.imageViewCamera.setImageBitmap(imageBitmap
1.6K00编辑于 2024-03-25 - 来自专栏Vue中文社区
10个你可能没用过，但很强大的Web API
const imageCapture = new ImageCapture(track); imageCapture.grabFrame() .then(imageBitmap => { const canvas = document.querySelector('#grabFrameCanvas'); drawCanvas(canvas, imageBitmap ImageCapture(track); imageCapture.takePhoto().then(blob => createImageBitmap(blob)) .then(imageBitmap { const canvas = document.querySelector('#takePhotoCanvas'); drawCanvas(canvas, imageBitmap
90340发布于 2021-05-24 - 来自专栏跟牛老师一起学WEBGIS
mapboxGL中多颜色图标的实现
分析 map.addImage添加的是一个ImageBitmap,可通过OffscreenCanvas的transferToImageBitmap将canvas转换为ImageBitmap。
1.2K30编辑于 2023-03-31 - 来自专栏郭霖
Android照片墙加强版，使用ViewPager实现画廊效果
. params) { mItemPosition = params[0]; mImageUrl = Images.imageUrls[mItemPosition]; Bitmap imageBitmap = imageLoader.getBitmapFromMemoryCache(mImageUrl); if (imageBitmap == null) { imageBitmap = loadImage (mImageUrl); } return imageBitmap; } ...... /** * 向ImageView中添加一张图片 * * @param
2.7K70发布于 2018-01-05 - 来自专栏深度学习与python
10个不那么知名但很实用的Web API
const imageCapture = new ImageCapture(track); imageCapture.grabFrame() .then(imageBitmap => { const canvas = document.querySelector('#grabFrameCanvas'); drawCanvas(canvas, imageBitmap ImageCapture(track); imageCapture.takePhoto().then(blob => createImageBitmap(blob)) .then(imageBitmap { const canvas = document.querySelector('#takePhotoCanvas'); drawCanvas(canvas, imageBitmap
80731发布于 2020-09-23 - 来自专栏音视频咖
技术解码 | Web端AR美颜特效性能优化
在一番研究之后发现有两个方案可以实现图像在线程之间的传输，一个是Shared Array Buffer（SAB），一个是ImageBitmap。 而ImageBitmap是纯前端的实现方案，方便传递的同时性能开销也更低，可以通过createImageBitmap方法将常见的HTMLMediaElement转成ImageBitmap。 因此最终选定了使用ImageBitmap的数据传递方案。
2.6K20编辑于 2022-05-09 - 来自专栏音视频咖
技术解码 | Web端AR美颜特效技术实现
在实际的业务场景中为了保证清晰度画面往往比较大，而给模型检测的画面过大容易造成不必要的性能损耗，发送至模型检测的样本会被转化成为ImageBitmap，ImageBitmap可以节省在模型计算中解码纹理的消耗
3.3K30编辑于 2022-04-24 - 来自专栏程序员互动联盟
【Android基础】利用Intent在Activity之间传递数据
REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) { Bundle extras = data.getExtras(); Bitmap imageBitmap = (Bitmap) extras.get("data"); mImageView.setImageBitmap(imageBitmap); } } 获取启动Intent：
2.3K60发布于 2018-03-14 - 来自专栏历史专栏
【愚公系列】2023年12月 HarmonyOS教学课程 029-ArkUI组件（Canvas）
OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private img:ImageBitmap = new ImageBitmap("1702344909275.jpg") build() { Flex({ direction: FlexDirection.Column, alignItems OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private img:ImageBitmap = new ImageBitmap("1702344909275.jpg") build() { Flex({ direction: FlexDirection.Column, alignItems
30700编辑于 2025-06-02 - 来自专栏无人打理的花园
[pixlate] 用 canvas 转像素画
CanvasImageSource)，例如：CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap
2K20发布于 2019-08-04 - 来自专栏JetpackCompose M3
安卓软件开发：如何实现机器学习部署到安卓端
let { val imageBitmap = getBitmapFromUri(it) imageView.setImageBitmap (imageBitmap) imageBitmap?.
2.8K105编辑于 2024-09-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号