web网站项目使用图片处理组件的方法
技术领域
1.本发明属于浏览器技术领域，特别涉及一种web网站项目使用图片处理组件的方法。
背景技术：2.个人电脑pc端，浏览器的使用率越来越高，其丰富的多媒体数据展示能力功不可没。但如果需要对多媒体数据进行加工处理，比如给视频加水印，给图片进行裁剪，缩放，因为浏览器端原生javascript处理要么不支持，要么性能很差，我们往往需要借助一些安装在电脑本地的软件预先处理好再上传。
技术实现要素：3.本发明的目的是提供一种原生集成，无需额外安装浏览器插件，用来为浏览器(不包含ie系列)加工图片提供一种使浏览器里的网站可以像本地软件一样对图片进行加工变得可能的web网站项目使用图片处理组件的方法。本发明的另一目的是提供一种通用，便捷，高性能且可扩展的在浏览器端加工图片的办法。本发明的再一目的是提供一种进行更多的图片处理扩展，比如增加一种新的图片滤镜，将工具引入到自己的网站项目中，对图片进行预处理，可以轻松制作一个图片处理工具网站的web网站项目使用图片处理组件的方法。
4.本发明的技术解决方案是所述web网站项目使用图片处理组件的方法，其特殊之处在于，包括以下步骤：
5.⑴
将生成的image-web-lib web依赖库引入到自己的web网站项目里；
6.⑵
同步加载wasm文件，进行初始化；
7.⑶
在网站上通过file输入框加载一张图片；
8.⑷
调用filter方法，将图片和滤镜的名称传入，执行完成后，输出一种新的滤镜处理过的图片，重新展示。
9.作为优选：所述步骤
⑴
进一步包括：
10.(1.1)选用编程语言：native c/c++,go,rust,java均可，优选rust语言；
11.(1.2)开发环境准备：查找与webassembly的集成的native编程语言，优选rust语言；
12.(1.3)创建处理组件的基础结构。
13.作为优选：所述步骤(1.2)进一步包括：
14.(1.2.1)官网下载rust最新的开发库：
15.https://www.rust-lang.org/learn/get-started，默认完成安装即可；
16.(1.2.2)下载rust开发语言里支持webassembly的打包工具：
17.https://rustwasm.github.io/wasm-pack/installer/，默认完成安装即可；
18.(1.2.3)编译导出webassembly模块,在工程目录下执行命令：wasm-pack build。
19.作为优选：所述步骤(1.3)进一步包括：
20.(1.3.1)创建一空白项目：使用rust开发环境下的包管理器cargo，命令如下：cargo new image-web-lib；
21.(1.3.2)设置项目类型为动态库：默认类型为可执行文件，制作满足webassembly标准且方便web应用调用的工具库；修改清单文件cargo.toml, 添加或修改：
22.[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均可)，企业可以按照自己的偏好进行选择；本发明则优先选用rust语言(rust是目前比较流行的系统编程语言，主要用来开发新一代的linux系统内核， rust的依赖关系清晰，模块内还有有特性区分，可以按需打包，最终生成的模块体积非常小，对于web加载非常友好)
[0043]
其次，开发环境准备，以rust语言为例(其他native编程语言可自行查找与webassembly的集成方案)
[0044]
⑴
去官网下载rust最新的开发库：
[0045]
https://www.rust-lang.org/learn/get-started，默认完成安装即可
[0046]
⑵
下载rust开发语言里支持webassembly的打包工具： https://rustwasm.github.io/wasm-pack/installer/，默认完成安装即可
[0047]
最后，我们开始创建这个组件的基础结构
[0048]
⑴
创建一个空白项目：使用cargo(rust开发环境下的包管理器)，命令如下：
[0049]
cargo new image-web-lib
[0050]
⑵
设置项目类型为动态库：默认类型为可执行文件，而不是要设计一个可执行的应用程序，是要制作一个满足webassembly标准的方便web应用调用的工具库；这里修改清单文件cargo.toml,添加或修改：
[0051]
[lib]
[0052]
crate-typ＝["cdylib","rlib"]
[0053]
⑶
由于我们要对图片进行处理，所以这个原生native组件本身需要引入一些图片处理相关的依赖库；如图1所示：
[0054]
⑷
以创建滤镜为例(其他的方式比如图片缩放，裁剪可在掌握图片处理的api后自行扩展)；
[0055]
a.在工程的src目录下新建一个filters.ts的文件；
[0056]
b.在filters.ts中导入相关依赖，新建一个filter方法，接收两个参数，一个是图片内容，一个滤镜的名称；比如创建一个海洋蓝调风格的滤镜，只需要将原始图片的每1个像素值origin_value和混合色mix_color_value＝rgb(0,14,119)按按0.2的透明度opacity进行线性混合即可，公式如下：
[0057]
result_value(最终滤镜效果的颜色)＝(mix_color_value-[0058]
origin_value)*opacity+origin_value
[0059]
c.完成了之后，在该方法(filter)上面打上标签#[wasm_bindgen]，这样在编译的时候，就可以将该方法编译成webassembly javascript方法。
[0060]
需要注意的是：
[0061]
i.各类具体的图片加工所涉及的算法，并不是本发明的核心内容。常用的滤镜，图片翻转，反色，旋转，水印添加等都有现成的api可以直接调用，不管选择的开发语言是
rust，java还是c/c++都用现成的图片加工 api可以直接使用，只需查阅相关官方文档即可，比如java可以使用javacv进行图片加工，c++可以使用ffmpeg/opencv进行图片加工；如需要扩展更多的图片加工方法，可以自行学习掌握图片加工算法，然后在本发明的基础上继续扩展，只需要按上面a,b,c三步走即可。
[0062]
ii.本发明侧重的是一种浏览器端通用且高效的图片加工策略，而不是某一种具体的加工方法。
[0063]
⑸
编译导出webassembly模块,在工程目录下执行命令：wasm-packbuild.
[0064]
⑹
编译成功后，一个可以被web工程直接使用的图片处理组件就自动生成了,这个组件的文件清单如图2所示；
[0065]
web网站项目使用图片处理组件：
[0066]
⑴
将上面生成的image-web-lib web依赖库引入到自己的web网站项目里
[0067]
⑵
同步加载wasm文件，进行初始化
[0068]
⑶
在网站上通过file输入框加载一张图片
[0069]
⑷
调用filter方法，将图片和滤镜的名称传入，执行完成后，输出一种新的滤镜处理过的图片，重新展示。
[0070]
以上所述仅为本发明的较佳实施例，凡依本发明权利要求范围所做的均等变化与修饰，皆应属本发明权利要求的涵盖范围。
技术特征：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-pack build。4.根据权利要求2所述web网站项目使用图片处理组件的方法，其特征在于，所述步骤(1.3)进一步包括：(1.3.1)创建一空白项目：使用rust开发环境下的包管理器cargo，命令如下：cargo new image-web-lib；(1.3.2)设置项目类型为动态库：默认类型为可执行文件，制作满足webassembly标准且方便web应用调用的工具库；修改清单文件cargo.toml,添加或修改：[lib]crate-typ＝["cdylib","rlib"]。5.根据权利要求1所述web网站项目使用图片处理组件的方法，其特征在于，所述步骤
⑷
进一步包括：(4.1)创建滤镜：(4.1.1)在工程的src目录下新建一个filters.ts的文件；(4.1.2)在filters.ts中导入相关依赖，新建一个filter方法，接收两个参数，图片内容和滤镜的名称；将原始图片的每1个像素值origin_value和混合色mix_color_value＝rgb(0,14,119)按0.2的透明度opacity进行线性混合即可，公式如下：result_value(最终滤镜效果的颜色)＝(mix_color_value-origin_value)*opacity+origin_value；(4.1.3)完成后，在该filter上面打上标签#[wasm_bindgen]，在编译的时候，将该方法编译成webassembly javascript方法。
技术总结本发明涉及Web网站项目使用图片处理组件的方法。包括：
技术研发人员：张少举 吴海荣 林辉 王晨 黄根华 陈林 葛宝 张静 王宗玥 朱国印 杨彪 王超
受保护的技术使用者：民商数字科技（深圳）有限公司
技术研发日：2022.05.10
技术公布日：2022/11/1
