单张图片逻辑完成
This commit is contained in:
parent
5c459002ca
commit
b06047ec71
|
|
@ -0,0 +1,3 @@
|
|||
(function(a,b){if("function"==typeof define&&define.amd)define([],b);else if("undefined"!=typeof exports)b();else{b(),a.FileSaver={exports:{}}.exports}})(this,function(){"use strict";function b(a,b){return"undefined"==typeof b?b={autoBom:!1}:"object"!=typeof b&&(console.warn("Deprecated: Expected third argument to be a object"),b={autoBom:!b}),b.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type)?new Blob(["\uFEFF",a],{type:a.type}):a}function c(a,b,c){var d=new XMLHttpRequest;d.open("GET",a),d.responseType="blob",d.onload=function(){g(d.response,b,c)},d.onerror=function(){console.error("could not download file")},d.send()}function d(a){var b=new XMLHttpRequest;b.open("HEAD",a,!1);try{b.send()}catch(a){}return 200<=b.status&&299>=b.status}function e(a){try{a.dispatchEvent(new MouseEvent("click"))}catch(c){var b=document.createEvent("MouseEvents");b.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),a.dispatchEvent(b)}}var f="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof global&&global.global===global?global:void 0,a=/Macintosh/.test(navigator.userAgent)&&/AppleWebKit/.test(navigator.userAgent)&&!/Safari/.test(navigator.userAgent),g=f.saveAs||("object"!=typeof window||window!==f?function(){}:"download"in HTMLAnchorElement.prototype&&!a?function(b,g,h){var i=f.URL||f.webkitURL,j=document.createElement("a");g=g||b.name||"download",j.download=g,j.rel="noopener","string"==typeof b?(j.href=b,j.origin===location.origin?e(j):d(j.href)?c(b,g,h):e(j,j.target="_blank")):(j.href=i.createObjectURL(b),setTimeout(function(){i.revokeObjectURL(j.href)},4E4),setTimeout(function(){e(j)},0))}:"msSaveOrOpenBlob"in navigator?function(f,g,h){if(g=g||f.name||"download","string"!=typeof f)navigator.msSaveOrOpenBlob(b(f,h),g);else if(d(f))c(f,g,h);else{var i=document.createElement("a");i.href=f,i.target="_blank",setTimeout(function(){e(i)})}}:function(b,d,e,g){if(g=g||open("","_blank"),g&&(g.document.title=g.document.body.innerText="downloading..."),"string"==typeof b)return c(b,d,e);var h="application/octet-stream"===b.type,i=/constructor/i.test(f.HTMLElement)||f.safari,j=/CriOS\/[\d]+/.test(navigator.userAgent);if((j||h&&i||a)&&"undefined"!=typeof FileReader){var k=new FileReader;k.onloadend=function(){var a=k.result;a=j?a:a.replace(/^data:[^;]*;/,"data:attachment/file;"),g?g.location.href=a:location=a,g=null},k.readAsDataURL(b)}else{var l=f.URL||f.webkitURL,m=l.createObjectURL(b);g?g.location=m:location.href=m,g=null,setTimeout(function(){l.revokeObjectURL(m)},4E4)}});f.saveAs=g.saveAs=g,"undefined"!=typeof module&&(module.exports=g)});
|
||||
|
||||
//# sourceMappingURL=FileSaver.min.js.map
|
||||
22
index.css
22
index.css
|
|
@ -49,6 +49,9 @@ body {
|
|||
margin-top: auto;
|
||||
margin-bottom: 5vh;
|
||||
justify-self: flex-end;
|
||||
width: 8vw;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.right {
|
||||
|
|
@ -82,6 +85,16 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#canvasList {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#canvasList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.imgcard {
|
||||
margin: 5px 0;
|
||||
border: 3px dotted gray;
|
||||
|
|
@ -130,7 +143,8 @@ body {
|
|||
font-size: xx-large;
|
||||
}
|
||||
|
||||
#canvasList,#fileInput {
|
||||
#canvasList,
|
||||
#fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -138,4 +152,10 @@ body {
|
|||
#pic_scale_sc,
|
||||
#pic_scale_fun {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#scale_size_ani,
|
||||
#scale_size_sc_ani,
|
||||
#ani_but {
|
||||
display: none;
|
||||
}
|
||||
10
index.html
10
index.html
|
|
@ -35,7 +35,8 @@
|
|||
x
|
||||
<input class="scale_size" id="scale_size_height" type="number" min="0" max="10000" value="128">
|
||||
</div>
|
||||
<div class="scale_size_but row" onclick="scale_size()">点击缩放</div>
|
||||
<div class="scale_size_but row" onclick="scale_size()" id="scale_size_nor">点击缩放</div>
|
||||
<div class="scale_size_but row" onclick="scale_size_ani()" id="scale_size_ani">点击缩放</div>
|
||||
</div>
|
||||
<div class="row"id="pic_scale_sc">
|
||||
<div class="row_Text title">指定比例缩放</div>
|
||||
|
|
@ -44,17 +45,20 @@
|
|||
x
|
||||
<input class="scale_size" id="scale_size_sc_y" type="text" value="2">
|
||||
</div>
|
||||
<div class="scale_size_but row" onclick="scale_size_sc()">点击缩放</div>
|
||||
<div class="scale_size_but row" onclick="scale_size_sc()" id="scale_size_sc_nor">点击缩放</div>
|
||||
<div class="scale_size_but row" onclick="scale_size_sc_ani()" id="scale_size_sc_ani">点击缩放</div>
|
||||
</div>
|
||||
<div class="row"id="pic_scale_fun">
|
||||
<div class="row_Text title">趣味功能</div>
|
||||
<div class="scale_size_but row" onclick="scale_size_ma()">马赛克化</div>
|
||||
<div class="scale_size_but row" onclick="animate()" id="ani_but">动画模式</div>
|
||||
</div>
|
||||
<div class="row down">下载</div>
|
||||
<div class="row down" onclick="saveImg()">下载</div>
|
||||
</div>
|
||||
<!-- <canvas id="Canvas" width="256px" height="256px"></canvas>
|
||||
<canvas id="Canvas2" width="512px" height="512px"></canvas> -->
|
||||
</div>
|
||||
<script src="jquery-3.6.1.min.js"></script>
|
||||
<script src="FileSaver.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
206
main.js
206
main.js
|
|
@ -1,11 +1,11 @@
|
|||
var dropBox, canvasList, imgList, work, imgCols
|
||||
var canvass = [], imgs = []
|
||||
var pic_info
|
||||
var multi
|
||||
var imgh = [0, 0, 0]
|
||||
let dropBox, canvasList, imgList, work, imgCols
|
||||
let canvass = [], imgs = []
|
||||
let pic_info
|
||||
let multi
|
||||
let imgh = [0, 0, 0]
|
||||
|
||||
var vh = window.innerHeight / 100;
|
||||
var vw = window.innerWidth / 100;;
|
||||
let vh = window.innerHeight / 100;
|
||||
let vw = window.innerWidth / 100;;
|
||||
|
||||
window.onload = function () {
|
||||
dropBox = document.getElementById("dropbox");
|
||||
|
|
@ -37,10 +37,10 @@ function dropFileOver(e) {
|
|||
function dropFile(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
var data = e.dataTransfer;
|
||||
var files = []
|
||||
for (var i = 0; i < data.files.length; i++) {
|
||||
var file_type = data.files[i].type;
|
||||
let data = e.dataTransfer;
|
||||
let files = []
|
||||
for (let i = 0; i < data.files.length; i++) {
|
||||
let file_type = data.files[i].type;
|
||||
if (file_type.substr(0, 5) == "image") {
|
||||
files.push(data.files[i]);
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@ function noFileError() {
|
|||
}
|
||||
|
||||
function selectFile() {
|
||||
var fileInput = document.getElementById("fileInput");
|
||||
let fileInput = document.getElementById("fileInput");
|
||||
fileInput.click();
|
||||
}
|
||||
|
||||
|
|
@ -72,53 +72,115 @@ function processFiles(files) {
|
|||
document.getElementById("pic_scale_sc").style.display = "flex";
|
||||
document.getElementById("pic_scale_fun").style.display = "flex";
|
||||
work.style.display = "flex";
|
||||
var pic_num = document.createElement('div');
|
||||
pic_num.setAttribute("class", "row_Text");
|
||||
pic_num.innerHTML = "图片数量：" + files.length + " 张"
|
||||
pic_info.appendChild(pic_num)
|
||||
var canvas_i = 0;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var reader = new FileReader();
|
||||
if (multi == 1) {
|
||||
let pic_num = document.createElement('div');
|
||||
pic_num.setAttribute("class", "row_Text");
|
||||
pic_num.innerHTML = "图片数量：" + files.length + " 张"
|
||||
pic_info.appendChild(pic_num)
|
||||
|
||||
let canvas_i = 0;
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
let reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
let image = new Image();
|
||||
image.src = e.target.result;
|
||||
image.onload = function () {
|
||||
let width = image.width;
|
||||
let height = image.height;
|
||||
let canvas = document.createElement('canvas');
|
||||
let ctx = canvas.getContext("2d");
|
||||
canvas.setAttribute("width", width + "px")
|
||||
canvas.setAttribute("height", height + "px")
|
||||
canvas.setAttribute("id", "canvas_" + canvas_i);
|
||||
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
canvass.push(canvas)
|
||||
|
||||
canvasList.appendChild(canvas);
|
||||
|
||||
imgInsert(image, canvas_i);
|
||||
canvas_i++;
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(files[i]);
|
||||
}
|
||||
}
|
||||
else {
|
||||
let file = files[0]
|
||||
let ls = 4, rows = [];
|
||||
while (ls--) {
|
||||
let row = document.createElement('div')
|
||||
row.setAttribute("class", "row_Text");
|
||||
rows.push(row)
|
||||
}
|
||||
rows[0].innerHTML = "文件名：" + file.name
|
||||
rows[1].innerHTML = "文件大小：" + file.size
|
||||
rows[2].innerHTML = "文件类型：" + file.type
|
||||
rows[3].innerHTML = "最后修改：" + file.lastModifiedDate
|
||||
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
pic_info.appendChild(rows[i])
|
||||
}
|
||||
|
||||
document.getElementById("ani_but").style.display = "flex"
|
||||
|
||||
document.getElementById("c2").style.display = "none"
|
||||
document.getElementById("c3").style.display = "none"
|
||||
|
||||
let reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var image = new Image();
|
||||
let image = new Image();
|
||||
image.src = e.target.result;
|
||||
image.onload = function () {
|
||||
var width = image.width;
|
||||
var height = image.height;
|
||||
var canvas = document.createElement('canvas');
|
||||
var ctx = canvas.getContext("2d");
|
||||
let width = image.width;
|
||||
let height = image.height;
|
||||
|
||||
let row = document.createElement('div')
|
||||
row.setAttribute("class", "row_Text");
|
||||
row.setAttribute("id", "size")
|
||||
row.innerHTML = "尺寸：" + width + " x " + height
|
||||
pic_info.appendChild(row)
|
||||
|
||||
let canvas = document.createElement('canvas')
|
||||
let ctx = canvas.getContext("2d")
|
||||
|
||||
canvas.setAttribute("width", width + "px")
|
||||
canvas.setAttribute("height", height + "px")
|
||||
canvas.setAttribute("id", "canvas_" + canvas_i);
|
||||
canvas.setAttribute("id", "canvas");
|
||||
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
canvass.push(canvas)
|
||||
|
||||
canvasList.appendChild(canvas);
|
||||
|
||||
imgInsert(image, canvas_i);
|
||||
canvas_i++;
|
||||
// imgList.appendChild(image);
|
||||
// dropBox.style.backgroundImage = "url('" + e.target.result + "')";
|
||||
if (canvas.width > 60 * vw) image.setAttribute("width", 60 * vw + "px")
|
||||
document.getElementById("c1").appendChild(image)
|
||||
document.getElementById("c1").style.width = 70 * vw + "px"
|
||||
|
||||
imgs.push(image);
|
||||
|
||||
document.getElementById("scale_size_width").value = Math.round(width / 2)
|
||||
document.getElementById("scale_size_height").value = Math.round(height / 2)
|
||||
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(files[i]);
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
function findex(value, arr) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (arr[i] == value) return i;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function imgInsert(img, index) {
|
||||
var i = findex(Math.min(...imgh), imgh)
|
||||
let i = findex(Math.min(...imgh), imgh)
|
||||
imgh[i] += img.height / img.width * 20 * vw + 24;
|
||||
var imgdiv = document.createElement('div');
|
||||
var imgdesp = document.createElement('div');
|
||||
let imgdiv = document.createElement('div');
|
||||
let imgdesp = document.createElement('div');
|
||||
imgdiv.setAttribute("class", "imgcard")
|
||||
imgdesp.setAttribute("class", "imgdesp")
|
||||
imgdesp.innerHTML = "[" + (index + 1) + "] " + img.width + " x " + img.height
|
||||
|
|
@ -164,9 +226,8 @@ function scale_size_ma() {
|
|||
// scale(i, 1 / scale_s, 1 / scale_s)
|
||||
// scale(i, scale_s, scale_s)
|
||||
// }
|
||||
|
||||
|
||||
scale(i, 0.3, 0.3)
|
||||
// scale(i, 5, 5)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -204,43 +265,48 @@ function scale(index, scale_x, scale_y) {
|
|||
ctx.fillRect(j, i, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
let imgdata = canvas2.toDataURL();
|
||||
newImg = new Image();
|
||||
newImg.src = imgdata;
|
||||
newImg.setAttribute("width", 20 * vw + "px")
|
||||
|
||||
document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
|
||||
document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
|
||||
canvasList.replaceChild(canvas2, canvass[index]);
|
||||
if (multi == 1) {
|
||||
|
||||
canvass[index] = canvas2;
|
||||
imgs[index] = newImg;
|
||||
newImg.setAttribute("width", 20 * vw + "px")
|
||||
document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
|
||||
document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
|
||||
canvasList.replaceChild(canvas2, canvass[index]);
|
||||
|
||||
canvass[index] = canvas2;
|
||||
imgs[index] = newImg;
|
||||
}
|
||||
else {
|
||||
if (canvas2.width > 60 * vw) newImg.setAttribute("width", 60 * vw + "px")
|
||||
|
||||
document.getElementById("size").innerHTML = "尺寸：" + canvas2.width + " x " + canvas2.height
|
||||
|
||||
document.getElementById("c1").replaceChild(newImg, imgs[index]);
|
||||
canvasList.replaceChild(canvas2, canvass[index]);
|
||||
|
||||
canvass[index] = canvas2;
|
||||
imgs[index] = newImg;
|
||||
}
|
||||
}
|
||||
|
||||
// canvas = document.getElementById('Canvas');
|
||||
// let cxt = canvas.getContext('2d');
|
||||
// let l = canvas.width / 2;
|
||||
// const PI = Math.PI;
|
||||
// cxt.translate(l, l);
|
||||
|
||||
// let createTaiChi = () => {
|
||||
// cxt.clearRect(-l, -l, l, l);
|
||||
// cxt.arc(0, 0, l, 0, 2 * PI, 0);
|
||||
// cxt.stroke();
|
||||
// cxt.beginPath();
|
||||
// cxt.arc(0, -l / 2, l / 2, -PI / 2, PI / 2, 0);
|
||||
// cxt.arc(0, l / 2, l / 2, 3 / 2 * PI, PI / 2, 1);
|
||||
// cxt.arc(0, 0, l, PI / 2, PI * 3 / 2, 0);
|
||||
// cxt.fill();
|
||||
// cxt.beginPath();
|
||||
// cxt.fillStyle = '#fff';
|
||||
// cxt.arc(0, -l / 2, l / 7, 0, PI * 2, 0);
|
||||
// cxt.fill();
|
||||
// cxt.beginPath();
|
||||
// cxt.fillStyle = '#000';
|
||||
// cxt.arc(0, l / 2, l / 7, 0, PI * 2, 0);
|
||||
// cxt.fill();
|
||||
// };
|
||||
|
||||
// createTaiChi();
|
||||
|
||||
function saveImg() {
|
||||
if (multi == 1) {
|
||||
let blobs = []
|
||||
for (let i = 0; i < canvass.length; i++) {
|
||||
canvass[i].toBlob(function (blob) {
|
||||
console.log(blob)
|
||||
saveAs(blob, "yiipic_" + (i + 1) + ".png");
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
canvass[0].toBlob(function (blob) {
|
||||
console.log(blob)
|
||||
saveAs(blob, "yiipic.png");
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue