rendorTrans = async () => {
const img = new Image();
img.src = status.imagePath;
// console.log(`${img.naturalWidth} - ${img.naturalHeight}`);
const canvas = DOM.canvas(img.naturalWidth, img.naturalHeight);
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
// console.log(width, (width / img.naturalWidth) * img.naturalHeight);
var imageData = ctx.getImageData(0, 0, img.naturalWidth, img.naturalHeight);
console.log(`计算 ${imageData.data.length / 4} * 4 与 4 * 4 矩阵`);
// Use gpu or not
if (!navigator.gpu) {
let t0 = window.performance.now();
console.log(
'WebGPU is not supported. Enable chrome://flags/#enable-unsafe-webgpu flag.'
);
// trans rgba, when ispng is false, try 3*3 do not change alpha
var lineT = new matrix([
[A.a11, A.a12, A.a13, A.a14],
[A.a21, A.a22, A.a23, A.a24],
[A.a31, A.a32, A.a33, A.a34],
[A.a41, A.a42, A.a43, A.a44]
]);
rgbTrans(imageData, lineT);
console.log(
`不使用 GPU 加速：执行了 ${window.performance.now() - t0} 毫秒.`
);
} else {
// console.log('Now is using WebGPU');
// let t0 = window.performance.now();
// await rgbTransByGPU(imageData);
// console.log(
// `使用 GPU 加速：执行了 ${window.performance.now() - t0} 毫秒.`
// );
}
ctx.putImageData(imageData, 0, 0);
return canvas;
}
rgbTrans = (
img,
lineTransMatrix,
{ fx } = {
fx: mx => {
return mx;
}
}
) => {
// convert img.data to Matrix to compute
// console.log(img.data.length / 4);
var y = [];
for (let i = 0; i < img.data.length; i += 4) {
let x = [];
for (let j = 0; j < 4; ++j) {
x.push(img.data[i + j]);
}
y.push(x);
}
var m = new matrix(y);
// make lineTrans
var x = fx(m.mmul(lineTransMatrix));
// convert Matrix to linear Uint8Array
var z = [];
for (let i = 0; i < x.data.length; ++i) {
for (let j = 0; j < 4; ++j) {
img.data[4 * i + j] = x.data[i][j];
}
}
}
md`[Find How to use GPU in this notebook](https://observablehq.com/@yhyddr/images-by-gpu)`
rgbTransByGPU = async img => {
// construct first martix
var image = new Float32Array(2 + img.data.length);
image[0] = img.data.length / 4;
image[1] = 4;
for (var i = 0; i < img.data.length; i++) {
image[i + 2] = img.data[i];
}
// construct second matrix which use to trans
var lineT = new Float32Array([
4,
4,
A.a11,
A.a12,
A.a13,
A.a14,
A.a21,
A.a22,
A.a23,
A.a24,
A.a31,
A.a32,
A.a33,
A.a34,
A.a41,
A.a42,
A.a43,
A.a44
]);
// console.log(img);
// use gpu compute the result
const result = await gpuMatrixCompute(image, lineT);
for (var i = 0; i < result.length; i++) {
img.data[i] = result[i + 2];
}
// console.log(img);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
