the foreground uses base64 encoding format, and this is what it looks like in the background database
upload code
compress (img) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
//400
let ratio;
if ((ratio = width * height / 4000000) > 1) {
console.log("400");
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
//
ctx.fillStyle = "-sharpfff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//100
let count;
if ((count = width * height / 1000000) > 1) {
console.log("100W");
count = ~~(Math.sqrt(count) + 1); //
//
let nw = ~~(width / count);
let nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (let i = 0; i < count; iPP) {
for (let j = 0; j < count; jPP) {
tctx.drawImage(
img,
i * nw * ratio,
j * nh * ratio,
nw * ratio,
nh * ratio,
0,
0,
nw,
nh
);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//
let ndata = canvas.toDataURL("image/jpeg", 0.1);
console.log(":" + initSize);
console.log(":" + ndata.length);
console.log(
":" + ~~(100 * (initSize - ndata.length) / initSize) + "%"
);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
console.log(ndata);
return ndata;
}},