Web网站项目使用图片处理组件的方法技术

本发明专利技术涉及Web网站项目使用图片处理组件的方法。包括：

【技术实现步骤摘要】
Web网站项目使用图片处理组件的方法


[0001]本专利技术属于浏览器
，特别涉及一种Web网站项目使用图片处理组件的方法。

技术介绍

[0002]个人电脑PC端，浏览器的使用率越来越高，其丰富的多媒体数据展示能力功不可没。但如果需要对多媒体数据进行加工处理，比如给视频加水印，给图片进行裁剪，缩放，因为浏览器端原生javascript处理要么不支持，要么性能很差，我们往往需要借助一些安装在电脑本地的软件预先处理好再上传。

技术实现思路

[0003]本专利技术的目的是提供一种原生集成，无需额外安装浏览器插件，用来为浏览器(不包含IE系列)加工图片提供一种使浏览器里的网站可以像本地软件一样对图片进行加工变得可能的Web网站项目使用图片处理组件的方法。本专利技术的另一目的是提供一种通用，便捷，高性能且可扩展的在浏览器端加工图片的办法。本专利技术的再一目的是提供一种进行更多的图片处理扩展，比如增加一种新的图片滤镜，将工具引入到自己的网站项目中，对图片进行预处理，可以轻松制作一个图片处理工具网站的Web网站项目使用图片处理组件的方法。
[0004]本专利技术的技术解决方案是所述Web网站项目使用图片处理组件的方法，其特殊之处在于，包括以下步骤：
[0005]⑴
将生成的image
‑
web
‑
lib web依赖库引入到自己的web网站项目里；
[0006]⑵
同步加载WASM文件，进行初始化；
[0007]⑶
在网站上通过file输入框加载一张图片；
[0008]⑷
调用filter方法，将图片和滤镜的名称传入，执行完成后，输出一种新的滤镜处理过的图片，重新展示。
[0009]作为优选：所述步骤
⑴
进一步包括：
[0010](1.1)选用编程语言：Native C/C++,Go,Rust,Java均可，优选Rust语言；
[0011](1.2)开发环境准备：查找与WebAssembly的集成的Native编程语言，优选Rust语言；
[0012](1.3)创建处理组件的基础结构。
[0013]作为优选：所述步骤(1.2)进一步包括：
[0014](1.2.1)官网下载Rust最新的开发库：
[0015]https://www.rust
‑
lang.org/learn/get
‑
started，默认完成安装即可；
[0016](1.2.2)下载Rust开发语言里支持WebAssembly的打包工具：
[0017]https://rustwasm.github.io/wasm
‑
pack/installer/，默认完成安装即可；
[0018](1.2.3)编译导出WebAssembly模块,在工程目录下执行命令：wasm
‑
pack build。
[0019]作为优选：所述步骤(1.3)进一步包括：
[0020](1.3.1)创建一空白项目：使用Rust开发环境下的包管理器cargo，命令如下：cargo new image
‑
web
‑
lib；
[0021](1.3.2)设置项目类型为动态库：默认类型为可执行文件，制作满足WebAssembly标准且方便Web应用调用的工具库；修改清单文件Cargo.toml, 添加或修改：
[0022][lib][0023]crate
‑
typ＝["cdylib","rlib"]。
[0024]作为优选：所述步骤
⑷
进一步包括：
[0025](4.1)创建滤镜：
[0026](4.1.1)在工程的src目录下新建一个filters.ts的文件；
[0027](4.1.2)在filters.ts中导入相关依赖，新建一个filter方法，接收两个参数，图片内容和滤镜的名称；将原始图片的每1个像素值origin_value和混合色mix_color_value＝RGB(0,14,119)按0.2的透明度 opacity进行线性混合即可，公式如下：
[0028]result_value(最终滤镜效果的颜色)＝(mix_color value
‑
_origin_ value)*opacity+origin_value；
[0029](4.1.3)完成后，在该filter上面打上标签#[wasm_bindgen]，在编译的时候，将该方法编译成WebAssembly Javascript方法。
[0030]与现有技术相比，本专利技术的有益效果:
[0031]⑴
本专利技术制作出一种可被Web项目直接复用的、高效处理图片的组件。
[0032]⑵
基于本专利技术可扩展的特点，可进一步添加：翻转，水印，缩放，裁剪，甚至AI物体识别等功能，具体扩展到何种程度由专利使用者自行根据业务需要自行决定。
附图说明
[0033]图1是原生图片加工组件依赖库；
[0034]图2是本专利技术Web图片加工组件清单文件。
具体实施方式
[0035]本专利技术下面将结合实施例作进一步详述：
[0036]制定高性能通用的处理的技术方案
[0037]浏览器里只能使用Javascript脚本来执行代码，虽然现代浏览器支持了二进制文件操作，但是用Javascript运行在浏览器沙盒环境，且是解释执行的，处理起来效率低，而加工图片本身是CPU密集型的任务，Javascript是单线程执行的，CPU长时间无法释放，还会造成网页卡顿；纯Javascript可行，但效率低下；
[0038]所以我们需要寻求浏览器之外扩展图片处理的可能性：在很早的时候， 2012年以前，人们会选择使用安装插件的方式扩展浏览器的功能，但这个技术已经过时，现代浏览器基本上都支持WebAssembly(WebAssembly是一种二进制封装标准)，人们可以在这个标准下，用C/C++，Go，Rust，Java 等书写程序，经过编译，得到WASM文件，这样浏览器加载这个文件后，我们就能像调用常规浏览器API一样调用图片加工组件的API了；现代浏览器的广泛支持，使得本专利技术的方案很通用。
[0039]由于WebAssembly这种方式调用的是原始的二进制API处理图片，所以即便是Javascript里使用，也能获得接近原生Native的性能输出，和我们平时使用本地软件处理图片的效率几乎相差无几。
[0040]所以选择WebAssembly即可获得通用和高性能的好处。
[0041]制作满足WASM标准的图片处理组件：
[0042]首先，选用一种擅长的Native编程语言(C/C++,Go,Rust,Java均可)，企业可以按照自己的偏好进行选择；本专利技术则优先选本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种Web网站项目使用图片处理组件的方法，其特征在于，包括以下步骤：
⑴
将生成的image
‑
web
‑
lib web依赖库引入到自己的web网站项目里；
⑵
同步加载WASM文件，进行初始化；
⑶
在网站上通过file输入框加载一张图片；
⑷
调用filter方法，将图片和滤镜的名称传入，执行完成后，输出一种新的滤镜处理过的图片，重新展示。2.根据权利要求1所述Web网站项目使用图片处理组件的方法，其特征在于，所述步骤
⑴
进一步包括：(1.1)选用编程语言：Native C/C++,Go,Rust,Java均可，优先Rust语言；(1.2)开发环境准备：查找与WebAssembly的集成的Native编程语言，优选Rust语言；(1.3)创建处理组件的基础结构。3.根据权利要求2所述Web网站项目使用图片处理组件的方法，其特征在于，所述步骤(1.2)进一步包括：(1.2.1)官网下载Rust最新的开发库：https://www.rust
‑
lang.org/learn/get
‑
started，默认完成安装即可；(1.2.2)下载Rust开发语言里支持WebAssembly的打包工具：https://rustwasm.github.io/wasm
‑
pack/installer/，默认完成安装即可；(1.2.3)编译导出WebAssembly模块,在工程目录下执行命令：wasm...

【专利技术属性】
技术研发人员：张少举，吴海荣，林辉，王晨，黄根华，陈林，葛宝，张静，王宗玥，朱国印，杨彪，王超，
申请(专利权)人：民商数字科技深圳有限公司，
类型：发明
国别省市：