konva Image 对上报不同数据格式，客户端处理方式

2024-08-29 22:04
文章标签 处理 方式 客户端 数据格式 不同 image 上报 konva

本文主要是介绍konva Image 对上报不同数据格式，客户端处理方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3组件

<v-stageid="konva_stage":config="konvaConfig"ref="konvaStageRef"@wheel="wheelForScale($event)"><v-layer><v-group :config="group"><v-image:config="{image: pgmImage,}"/></v-group></v-layer></v-stage>


1. Blob 对象（推荐）


if (data instanceof Blob) {const url = URL.createObjectURL(data);pgmImage.value = new Image();pgmImage.value.src = url;pgmImage.value.onload = function () {console.log("pgmImage.width", pgmImage.value.naturalWidth);console.log("pgmImage.height", pgmImage.value.naturalHeight);};
}

2.base64(此种方式，读取图片内容转换成base64格式会比原图片大大概1/3)

const base64Str = imgData; // imgData 从后端接口或者websocket 上报数据
pgmImage.value = new Image();
pgmImage.value.src = base64Str;
pgmImage.value.onload = ()=> {// 获取图片参数 参与逻辑操作
}

3. pgm 这种非常不推荐pgm本身比其他图片格式大，且不能压缩处理，对图片较大情况下非常不友好！

解析接口传递过来的pgm 数据

const MapImage = function (data) {let exp = /^(\S+)\s+(\#.*?\n)*\s*(\d+)\s+(\d+)\s+(\d+)?\s*/;let match = data && data.match(exp);if (match) {let width = (this.width = parseInt(match[3], 10));let height = (this.height = parseInt(match[4], 10));let maxVal = parseInt(match[5], 10);let bytes = maxVal < 256 ? 1 : 2;let imgData = data.substr(match[0].length);switch (match[1]) {case "P1":this._parser = new ASCIIParser(maxVal + " " + imgData, bytes);this._formatter = new PBMFormatter(width, height);break;case "P2":this._parser = new ASCIIParser(imgData, bytes);this._formatter = new PGMFormatter(width, height, maxVal);break;case "P3":this._parser = new ASCIIParser(imgData, bytes);this._formatter = new PPMFormatter(width, height, maxVal);break;case "P4":this._parser = new BinaryParser(imgData, bytes);this._formatter = new PBMFormatter(width, height);break;case "P5":this._parser = new BinaryParser(imgData, bytes);this._formatter = new PGMFormatter(width, height, maxVal);break;case "P6":this._parser = new BinaryParser(data, bytes);this._formatter = new PPMFormatter(width, height, maxVal);break;default:throw new TypeError("Sorry, your file format is not supported. [" + match[1] + "]");}} else {throw new TypeError("Sorry, file does not appear to be a Netpbm file.");}
};MapImage.prototype.getInitMap = function (type = "image") {let canvas = this._formatter.getPainting(this._parser, type);return canvas;
};const BinaryParser = function (data, bytes) {this._data = data;this._bytes = bytes;this._pointer = 0;
};BinaryParser.prototype.getNextSample = function () {if (this._pointer >= this._data.length) return false;let val = 0;for (let i = 0; i < this._bytes; i++) {val = val * 255 + this._data.charCodeAt(this._pointer++);}return val;
};const ASCIIParser = function (data, bytes) {this._data = data.split(/\s+/);this._bytes = bytes;this._pointer = 0;
};ASCIIParser.prototype.getNextSample = function () {if (this._pointer >= this._data.length) return false;let val = 0;for (let i = 0; i < this._bytes; i++) {val = val * 255 + parseInt(this._data[this._pointer++], 10);}return val;
};const PPMFormatter = function (width, height, maxVal) {this._width = width;this._height = height;this._maxVal = maxVal;
};PPMFormatter.prototype.getPainting = function (parser, type) {let paintData = null;let canvas = null;let ctx = null;let img = null;if (type === "canvas") {canvas = document.createElement("canvas");ctx = canvas.getContext("2d");canvas.width = ctx.width = this._width;canvas.height = ctx.height = this._height;paintData = ctx.getImageData(0, 0, this._width, this._height);} else {paintData = new Uint8ClampedArray(this._width * this._height * 4);}let dataArr = type === "canvas" ? paintData.data : paintData;for (let row = 0; row < this._height; row++) {for (let col = 0; col < this._width; col++) {let factor = 255 / this._maxVal;let r = factor * parser.getNextSample();let g = factor * parser.getNextSample();let b = factor * parser.getNextSample();let pos = (row * this._width + col) * 4;dataArr[pos] = r;dataArr[pos + 1] = g;dataArr[pos + 2] = b;dataArr[pos + 3] = 255;}}if (type === "canvas") {ctx.putImageData(paintData, 0, 0);return canvas;} else {img = new ImageData(paintData, this._width, this._height);return img;}
};const PGMFormatter = function (width, height, maxVal) {this._width = width;this._height = height;this._maxVal = maxVal;
};PGMFormatter.prototype.getPainting = function (parser, type) {let paintData = null;let canvas = null;let ctx = null;let img = null;if (type === "canvas") {canvas = document.createElement("canvas");ctx = canvas.getContext("2d");canvas.width = ctx.width = this._width;canvas.height = ctx.height = this._height;paintData = ctx.getImageData(0, 0, this._width, this._height);} else {paintData = new Uint8ClampedArray(this._width * this._height * 4);}let dataArr = type === "canvas" ? paintData.data : paintData;for (let row = 0; row < this._height; row++) {for (let col = 0; col < this._width; col++) {let d = parser.getNextSample() * (255 / this._maxVal);let pos = (row * this._width + col) * 4;dataArr[pos] = d;dataArr[pos + 1] = d;dataArr[pos + 2] = d;dataArr[pos + 3] = 255;}}if (type === "canvas") {ctx.putImageData(paintData, 0, 0);return canvas;} else {img = new ImageData(paintData, this._width, this._height);return img;}
};const PBMFormatter = function (width, height) {this._width = width;this._height = height;
};PBMFormatter.prototype.getPainting = function (parser, type) {let paintData = null;let canvas = null;let ctx = null;let img = null;if (type === "canvas") {canvas = document.createElement("canvas");ctx = canvas.getContext("2d");canvas.width = ctx.width = this._width;canvas.height = ctx.height = this._height;paintData = ctx.getImageData(0, 0, this._width, this._height);}if (parser instanceof BinaryParser) {let data = "";let byte = null;let bytesPerLine = Math.ceil(this._width / 8);for (let i = 0; i < this._height; i++) {let line = parser._data.substr(i * bytesPerLine, bytesPerLine);let lineData = "";for (let j = 0; j < line.length; j++)lineData += ("0000000" + line.charCodeAt(j).toString(2)).substr(-8);data += lineData.substr(0, this._width);}while ((byte = parser.getNextSample()) !== false) {data += ("0000000" + byte.toString(2)).substr(-8);}parser = new ASCIIParser(data.split("").join(" "), 1);}let dataArr = type === "canvas" ? paintData.data : paintData;for (let row = 0; row < this._height; row++) {for (let col = 0; col < this._width; col++) {let d = (1 - parser.getNextSample()) * 255;let pos = (row * this._width + col) * 4;dataArr[pos] = d;dataArr[pos + 1] = d;dataArr[pos + 2] = d;dataArr[pos + 3] = 255;}}if (type === "canvas") {ctx.putImageData(paintData, 0, 0);return canvas;} else {img = new ImageData(paintData, this._width, this._height);return img;}
};export { MapImage };

vue2 使用方式：

if (pgmImageData) { //pgmImageData 接口返回let img = new MapImage(pgmImageData);let canvasImg = img.getInitMap("canvas");// canvasImg.width, canvasImg.heightthis.konvaConfig.pgmImage = new Image();this.konvaConfig.pgmImage.src = canvasImg.toDataURL();
}

这篇关于konva Image 对上报不同数据格式，客户端处理方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1118965。

相关文章

gitlab安装及邮箱配置和常用使用方式

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》：本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的
阅读更多...
电脑提示xlstat4.dll丢失怎么修复? xlstat4.dll文件丢失处理办法

电脑提示xlstat4.dll丢失怎么修复? xlstat4.dll文件丢失处理办法

《电脑提示xlstat4.dll丢失怎么修复?xlstat4.dll文件丢失处理办法》长时间使用电脑，大家多少都会遇到类似dll文件丢失的情况，不过，解决这一问题其实并不复杂，下面我们就来看看xls... 在Windows操作系统中，xlstat4.dll是一个重要的动态链接库文件，通常用于支持各种应用程序
阅读更多...
C++中零拷贝的多种实现方式

C++中零拷贝的多种实现方式

《C++中零拷贝的多种实现方式》本文主要介绍了C++中零拷贝的实现示例,旨在在减少数据在内存中的不必要复制,从而提高程序性能、降低内存使用并减少CPU消耗,零拷贝技术通过多种方式实现,下面就来了解一下... 目录一、C++中零拷贝技术的核心概念二、std::string_view 简介三、std::stri
阅读更多...
SQL Server数据库死锁处理超详细攻略

SQL Server数据库死锁处理超详细攻略

《SQLServer数据库死锁处理超详细攻略》SQLServer作为主流数据库管理系统,在高并发场景下可能面临死锁问题,影响系统性能和稳定性,这篇文章主要给大家介绍了关于SQLServer数据库死... 目录一、引言二、查询 Sqlserver 中造成死锁的 SPID三、用内置函数查询执行信息1. sp_w
阅读更多...
Java对异常的认识与异常的处理小结

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。（1）简单定义-什么是
阅读更多...
Linux脚本(shell)的使用方式

Linux脚本(shell)的使用方式

《Linux脚本(shell)的使用方式》：本文主要介绍Linux脚本(shell)的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录概述语法详解数学运算表达式Shell变量变量分类环境变量Shell内部变量自定义变量：定义、赋值自定义变量：引用、修改、删
阅读更多...
python判断文件是否存在常用的几种方式

python判断文件是否存在常用的几种方式

《python判断文件是否存在常用的几种方式》在Python中我们在读写文件之前,首先要做的事情就是判断文件是否存在,否则很容易发生错误的情况,：本文主要介绍python判断文件是否存在常用的几种... 目录1. 使用 os.path.exists()2. 使用 os.path.isfile()3. 使用
阅读更多...
Mybatis的分页实现方式

Mybatis的分页实现方式

《Mybatis的分页实现方式》MyBatis的分页实现方式主要有以下几种,每种方式适用于不同的场景,且在性能、灵活性和代码侵入性上有所差异,对Mybatis的分页实现方式感兴趣的朋友一起看看吧... 目录​1. 原生 SQL 分页（物理分页）​​2. RowBounds 分页（逻辑分页）​​3. Page
阅读更多...
MYSQL查询结果实现发送给客户端

MYSQL查询结果实现发送给客户端

《MYSQL查询结果实现发送给客户端》：本文主要介绍MYSQL查询结果实现发送给客户端方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql取数据和发数据的流程（边读边发）Sending to clientSending DataLRU(Least Rec
阅读更多...
Linux链表操作方式

Linux链表操作方式

《Linux链表操作方式》：本文主要介绍Linux链表操作方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、链表基础概念与内核链表优势二、内核链表结构与宏解析三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势六、典型应用场景七、调试技巧与
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2