polygonjs-engine
Version:
node-based webgl 3D engine https://polygonjs.com
244 lines (225 loc) • 7.85 kB
text/typescript
// import jimp from 'jimp';
// jimp.js is now async,
// and created via packs/jimp.ts
// import {Texture} from 'three/src/textures/Texture'
// import {Color} from 'three/src/math/Color'
export class CoreImage {
// constructor() {}
// https://stackoverflow.com/questions/6765370/merge-image-using-javascript
static overlay(img0: HTMLImageElement, img1: HTMLImageElement): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
let canvas = document.createElement('canvas');
canvas.width = Math.max(img0.width, img1.width);
canvas.height = Math.max(img0.height, img1.height);
let context = canvas.getContext('2d') as CanvasRenderingContext2D;
context.drawImage(img0, 0, 0, img0.width, img0.height);
context.drawImage(img1, 0, 0, img1.width, img1.height);
const datauri = canvas.toDataURL('image/png');
const img = new Image();
img.onload = () => {
resolve(img);
};
img.src = datauri;
});
}
// static image_from_path(url: string): Promise<HTMLImageElement> {
// return new Promise((resolve, reject) => {
// const img = new Image();
// img.onload = function() {
// resolve(img);
// };
// img.src = url;
// });
// }
// static image_from_color(color: THREE.Color, width: number, height: number): Promise<HTMLImageElement> {
// return new Promise((resolve, reject) => {
// const image = new Image();
// const canvas = document.createElement('canvas');
// canvas.width = width;
// canvas.height = height;
// const context = canvas.getContext('2d') as CanvasRenderingContext2D;
// context.fillStyle = color.getStyle();
// context.fillRect(0, 0, canvas.width, canvas.height);
// const data_url = canvas.toDataURL();
// image.onload = () => {
// resolve(image);
// };
// image.src = data_url;
// });
// }
// static image_from_texture(texture: THREE.Texture): Promise<HTMLImageElement | null> {
// return new Promise((resolve, reject) => {
// if (texture.image) {
// if (texture.image.data) {
// const image = new Image();
// image.width = texture.image.width;
// image.height = texture.image.height;
// const datauri = this.image_data_to_data_uri(texture.image);
// image.onload = () => {
// resolve(image);
// };
// image.src = datauri;
// } else {
// resolve(texture.image);
// }
// } else {
// resolve(null);
// }
// });
// }
// static image_to_datauri(image: HTMLImageElement): string {
// const canvas = document.createElement('canvas');
// canvas.width = image.width;
// canvas.height = image.height;
// const context = canvas.getContext('2d') as CanvasRenderingContext2D;
// // context.fillRect(0, 0, canvas.width, canvas.height)
// context.drawImage(image, 0, 0);
// return canvas.toDataURL();
// }
// static image_data_to_data_uri(image_data: ImageData): string {
// const canvas = document.createElement('canvas');
// const context = canvas.getContext('2d') as CanvasRenderingContext2D;
// canvas.width = image_data.width;
// canvas.height = image_data.height;
// // let stride
// // let color
// // lodash_times(canvas.width, (w)=>{
// // lodash_times(canvas.height, (h)=>{
// // stride = 4 * (w + h*w)
// // color = new THREE.Color(
// // image_data.data[stride],
// // image_data.data[stride+1],
// // image_data.data[stride+2]
// // )
// // context.fillStyle = color.getStyle()
// // context.fillRect(w, h, 1, 1)
// // })
// // })
// // const color = new THREE.Color(0,1,1)
// // context.fillStyle = color.getStyle()
// // context.fillRect(0, 0, canvas.width, canvas.height)
// // // context.putImageData(image_data.data, 0, 0)
// const context_imaged_data = context.getImageData(0, 0, canvas.width, canvas.height);
// // image_data.data = image_data.data.map(d=>d*255)
// context_imaged_data.data.set(image_data.data.map((d) => d * 255));
// context.putImageData(context_imaged_data, 0, 0);
// // document.body.appendChild(canvas)
// // document.body.style.overflow = 'auto'
// return canvas.toDataURL();
// }
// static datauri_from_texture(texture: THREE.Texture): string | null {
// if (texture.image) {
// if (texture.image.data) {
// return this.image_data_to_data_uri(texture.image);
// } else {
// return this.image_to_datauri(texture.image);
// }
// } else {
// console.warn(texture);
// return null;
// }
// }
static create_white_image(width: number, height: number): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
let canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
let context = canvas.getContext('2d') as CanvasRenderingContext2D;
context.beginPath();
context.rect(0, 0, width, height);
context.fillStyle = 'white';
context.fill();
const datauri = canvas.toDataURL('image/png');
const img = new Image();
img.onload = () => {
resolve(img);
};
img.src = datauri;
});
}
static make_square(src_img: HTMLImageElement): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
let canvas = document.createElement('canvas');
const size = Math.min(src_img.width, src_img.height);
const ratio = src_img.width / src_img.height;
canvas.width = size;
canvas.height = size;
let context = canvas.getContext('2d') as CanvasRenderingContext2D;
const is_landscape = ratio > 1;
const margin = is_landscape ? (src_img.width - size) / 2 : (src_img.height - size) / 2;
if (is_landscape) {
context.drawImage(src_img, margin, 0, size, size, 0, 0, size, size);
} else {
context.drawImage(src_img, 0, margin, size, size, 0, 0, size, size);
}
const datauri = canvas.toDataURL('image/png');
const img = new Image();
img.onload = () => {
resolve(img);
};
img.src = datauri;
});
}
// static async cover(img: HTMLImageElement, width: number, height: number){
// await CoreScriptLoader.load_jimp()
// const jimp_img = await self.jimp.read(img.src)
// return jimp_img.cover(width, height)
// }
// static async jimp_to_img(jimp_img): Promise<HTMLImageElement>{
// return new Promise(async (resolve, reject)=>{
// await CoreScriptLoader.load_jimp()
// jimp_img.getBase64(self.jimp.MIME_PNG, (err, src) => {
// const img = document.createElement('img');
// img.onload = ()=>{
// resolve(img)
// }
// img.src = src
// })
// })
// }
static async image_to_blob(img: HTMLImageElement): Promise<Blob> {
return new Promise(function (resolve, reject) {
try {
let xhr = new XMLHttpRequest();
xhr.open('GET', img.src);
xhr.responseType = 'blob';
xhr.onerror = function () {
reject('Network error.');
};
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject('Loading error:' + xhr.statusText);
}
};
xhr.send();
} catch (err) {
reject(err.message);
}
});
}
static data_from_url(url: string): Promise<ImageData> {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
const data = this.data_from_image(img);
resolve(data);
};
img.src = url;
});
}
static data_from_image(img: HTMLImageElement): ImageData {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const context = canvas.getContext('2d') as CanvasRenderingContext2D;
context.drawImage(img, 0, 0, img.width, img.height);
// canvas.style.width = `${img.width}px`;
// canvas.style.height = `${img.height}px`;
// document.body.appendChild(canvas);
// document.body.style.overflow = 'auto';
return context.getImageData(0, 0, img.width, img.height);
}
}