-1
브라우저에서 어떤 크기로도이 image의 png/jpeg 이미지 파일 (이미지 a)을 업로드 한 다음 다른 크기 (이미지 b)의 새 이미지로 내 보내야합니다. 보시다시피 이미지의 비율을 유지하고 누락 된 부분을 일반 색상 (예 : 흰색)으로 채우고 싶습니다. 자바 스크립트를 사용하여 어떻게해야합니까?캔버스 이미지의 배경을 확장하고 javascript의 File 객체로 변환하는 방법은 무엇입니까?
편집 : 죄송합니다. 이미이 문제를 해결하기 위해 자체 코드를 추가하여 내 질문을 편집했습니다. 제 작품은 캔버스를 사용하여 흰색 배경을 먼저 그린 다음 캔버스에 맞는 한 업로드 된 이미지를 그립니다. 그런 다음 Reimg.js를 사용하여 캔버스를 캡처하고 다운로드합니다.
그러나 캡쳐 된 이미지를 사용하고 싶다면 다시 업로드해야합니다. 아래 코드는 내가 원하는 것이 아닙니다.
그래서, 이미지 파일을 업로드 할 수있는 더 좋은 방법은캡처 및 다시을 해당 이미지를 업로드하지 않고 아래에 다음 파일 데이터 (File 객체)를 검색 내 코드처럼 처리하는가?
// reimg.js
window.ReImg = {
OutputProcessor: function(encodedData, svgElement) {
var isPng = function() {
return encodedData.indexOf('data:image/png') === 0;
};
var downloadImage = function(data, filename) {
var a = document.createElement('a');
a.href = data;
a.download = filename;
document.body.appendChild(a);
a.click();
};
return {
toBase64: function() {
return encodedData;
},
toImg: function() {
var imgElement = document.createElement('img');
imgElement.src = encodedData;
return imgElement;
},
toCanvas: function(callback) {
var canvas = document.createElement('canvas');
var boundedRect = svgElement.getBoundingClientRect();
canvas.width = boundedRect.width;
canvas.height = boundedRect.height;
var canvasCtx = canvas.getContext('2d');
var img = this.toImg();
img.onload = function() {
canvasCtx.drawImage(img, 0, 0);
callback(canvas);
};
},
toPng: function() {
if (isPng()) {
var img = document.createElement('img');
img.src = encodedData;
return img;
}
this.toCanvas(function(canvas) {
var img = document.createElement('img');
img.src = canvas.toDataURL();
return img;
});
},
toJpeg: function(quality) { // quality should be between 0-1
quality = quality || 1.0;
(function(q) {
this.toCanvas(function(canvas) {
var img = document.createElement('img');
img.src = canvas.toDataURL('image/jpeg', q);
return img;
});
})(quality);
},
downloadPng: function(filename) {
filename = filename || 'image.png';
if (isPng()) {
// it's a canvas already
downloadImage(encodedData, filename);
return;
}
// convert to canvas first
this.toCanvas(function(canvas) {
downloadImage(canvas.toDataURL(), filename);
});
}
};
},
fromSvg: function(svgElement) {
var svgString = new XMLSerializer().serializeToString(svgElement);
return new this.OutputProcessor('data:image/svg+xml;base64,' + window.btoa(svgString), svgElement);
},
fromCanvas: function(canvasElement) {
var dataUrl = canvasElement.toDataURL();
return new this.OutputProcessor(dataUrl);
}
};
// script.js
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
$('#uploadImage').on('change', function(event) {
var img = new Image();
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
};
reader.readAsDataURL(event.target.files[0]);
img.onload = function() {
// draw white background
context.beginPath();
context.rect(0, 0, 500, 500);
context.fillStyle = "white";
context.fill();
// draw uploaded image
var scale = Math.min((canvas.width/img.width), (canvas.height/img.height));
context.drawImage(img, 0, 0, img.width, img.height, (canvas.width - img.width * scale)/2, (canvas.height - img.height * scale)/2, img.width * scale, img.height * scale);
};
});
$('#btnCapture').on('click', function() {
ReImg.fromCanvas(canvas).downloadPng();
});#canvas {
border: 1px solid seagreen;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Resize Image</title>
</head>
<body>
<input id="uploadImage" type="file" accept="image/*" />
<button id="btnCapture" type="button">Capture</button>
<canvas id="canvas" height="500px" width="500px"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
나쁜 질문에 대해 사과드립니다. 이미 업데이트했습니다. –
이미지로 무엇을 하시겠습니까? 이미 다운로드 한 링크의 href 속성으로 참조 할 수 있습니다. 페이지에 이미지를 넣고 src를 같은 값으로 설정하면 이미지가 생깁니다. – Archer