wtools
wasm 工具包
编译生成 wasm node.js 包
- 编译
cargo install wasm-pack
wasm-pack build --scope duguying
- 上传
cd pkg
npm publish --access=public
- 启动 web 调试
wasm-pack build --scope duguying
npm install
npm run serve
- 缩减 wasm 文件大小
# 第一步 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
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 中注册
/**
* @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