custom_file.js (2464B)
1 const m = require("lib/mithril"); 2 const zimg = require("./zoomimg.js"); 3 4 function blob_to_img(blob) { 5 const img = new Image(); 6 img.src = URL.createObjectURL(blob); 7 return img; 8 } 9 10 let noise_grayscale = (x, y, val) => { 11 val = (0.3 * val[0] + 0.6 * val[1] + 0.1 * val[2])/ 256; 12 // val: input color; 0 <= val < 1 13 let color = 128; 14 const RAND = 100; 15 let xp = Math.random(); 16 let yp = Math.random(); 17 if ((x + y + 1) % 2 == 0 != yp < (1-2*val)*xp+val) { 18 xp = 1 - xp; 19 } 20 color = color - RAND + xp * 2 * RAND; 21 return [color, color, color]; 22 }; 23 24 let noise_color = (x, y, val) => 25 val.map(valc => { 26 valc = valc / 256; 27 let color = 128; 28 const RAND = 100; 29 let xp = Math.random(); 30 let yp = Math.random(); 31 if ((x + y + 1) % 2 == 0 != yp < (1-2*valc)*xp+valc) { 32 xp = 1 - xp; 33 } 34 return color - RAND + xp * 2 * RAND; 35 }); 36 37 38 module.exports = () => { 39 let image_elem_destroyed = true; 40 let image_size; 41 let image_tag; 42 return { 43 oninit: (vnode) => { 44 }, 45 oncreate: (vnode) => { 46 }, 47 view: (vnode) => m("div", 48 m("input", { 49 type: "file", 50 accept: "image/*,.jpg,.jpeg,.png", 51 style: { 52 marginBottom: "20px", 53 }, 54 onchange: (e) => { 55 image_tag = blob_to_img(e.target.files[0]); 56 image_tag.onload = () => { 57 console.log(image_tag) 58 console.log(image_tag.width); 59 image_size = Math.min(image_tag.width, image_tag.height); 60 if (image_size % 2 == 0) image_size--; 61 // this part is really dirty. the zoom element is 62 // recreated instead of updating. but it works 63 if (image_elem_destroyed == false) { 64 image_elem_destroyed = true; 65 m.redraw.sync(); 66 } 67 image_elem_destroyed = false; 68 m.redraw(); 69 }; 70 }, 71 }), 72 image_elem_destroyed? "" : m(zimg, { 73 size: image_size, 74 image: image_tag, 75 noise: vnode.attrs.color? noise_color : noise_grayscale, 76 }), 77 ) 78 }; 79 };