wtools

wasm 工具包

编译生成 wasm node.js 包

- 编译

``bash
cargo install wasm-pack
wasm-pack build --scope duguying
`

- 上传

`bash
cd pkg
npm publish --access=public
`

- 启动 web 调试

`bash
wasm-pack build --scope duguying
npm install
npm run serve
`

- 缩减 wasm 文件大小

`bash


第一步 Cargo.toml 设置

#

[profile.release]

lto = true

opt-level = 'z'

第二步 wasm-opt 工具优化

#

安装工具 npm i wasm-opt -g

wasm-opt -Oz -o output.wasm input.wasm
`

图片处理

- 缩放(scale)
- 旋转(rotate90, rotate180, rotate270)
- 翻转(flipv, fliph)
- 灰度(grayscale)
- 支持图片自动修正方向

加密处理

- md5

使用

一个简单 demo

`js
const js = import("./pkg/wtools.js");
js.then(js => {
js.greet("WebAssembly");

const c = new js.Crypt();

var out = c.md5("hello");
console.log(out);

// 点击导入按钮,使files触发点击事件,然后完成读取文件的操作
document.querySelector("#fileImport").onclick = function () {
document.querySelector("#files").click();
}

function arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}

window.fileImport = function() {
//获取读取我文件的File对象
var selectedFile = document.getElementById('files').files[0];
var reader = new FileReader();//这是核心,读取操作就是由它完成.
reader.readAsArrayBuffer(selectedFile);//读取文件的内容,也可以读取文件的URL
reader.onload = function () {
var preData = new Uint8Array(this.result);
var md5 = c.md5_uint8_array(preData);
console.log("file md5:",md5);
console.log("file:",selectedFile);

// scale
const i = new js.Img(preData, selectedFile.type);
let w = i.get_width();
let h = i.get_height();
if(w>h){
w=1080
h=h/w*1080
}else{
h=1080
w=w/h*1080
}
let beforeData = i.scale(w,h)

// show
let beforeUrl = arrayBufferToBase64(beforeData);
document.getElementById('before').src='data:image/png;base64,'+beforeUrl;

// rotate
let m = new js.Img(beforeData, selectedFile.type)
let afterData = m.rotate90();

// show
let afterUrl = arrayBufferToBase64(afterData);
document.getElementById('after').src='data:image/png;base64,'+afterUrl;
}
}
});
`

在 vue 中注册

`js
/**
* @description 全局注册md5工具
*/
async function waitwasm () {
const { Crypt } = await import('@duguying/wtools')
Vue.prototype.$md5 = (content) => {
let crypt = new Crypt()
let out = crypt.md5(content)
crypt.free()
return out
}
}
(async () => {
waitwasm()
})()

/**
* @description 任意组件中调用
*/
this.$md5(ctt)

``

License

MIT License