每当用户上传图像时，我都试图控制I图像大小，所以当用户上传像1600x1600这样的较大图像定在w=500和h=800的画布中，我如何在画布中做到这一点，而且图像质量必须相同，只能在图像中调整大小。
如何设置maxwidth和maxHeight来控制图像大小？
var jcp;
var save = document.getElementById('save');
var imageLoader = document.getElementById('imageLoader');
var img = document.getElementById("target");
imageLoader.onchange = function handleImage(e) { //handling our image picker <input>:
var reader = new FileReader();
reader.onload = function(event) {
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
save.onclick = function() {
if (jcp && jcp.active) {
var i = 0;
for (area of jcp.crops) {
i++;
canvas = document.createElement("canvas");
canvas.setAttribute('width', area.pos.w);
canvas.setAttribute('height', area.pos.h);
ctx = canvas.getContext("2d");
ctx.drawImage(img, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h);
temp = document.createElement('a');
temp.setAttribute('download', 'area' + i + '.jpg');
temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));
temp.click();
}
}
};
Jcrop.load('target').then(img => {
jcp = Jcrop.attach(img, {
multi: true
});
});<head>
<title>Jcrop Example</title>
<link href="https://unpkg.com/jcrop@3.0.1/dist/jcrop.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/jcrop@3.0.1/dist/jcrop.js"></script>
</head>
<body>
<div><a id="save">Save</a>
<input type="file" id="imageLoader" name="imageLoader" />
<!-- add this for file picker -->
</div>
<div>
<h1 style="font-family:Helvetica,sans-serif;">
Image Crop <span style="color:lightgray;"></span>
</h1>
<img id="target" style="background-size: cover !important;">
</div>
</body>我不确定什么不适合你，但在这里我制作了一个预览模式，这样你就可以在画布中看到你的裁剪结果。如果你想知道为什么donwload不起作用，也许是SO片段不允许，我不确定，但在这里你可以测试jsfiddle 中的完整工作示例
var jcp;
var save = document.getElementById('save');
var imageLoader = document.getElementById('imageLoader');
var img = document.getElementById("target");
var max_width = 500
var max_height = 500
var fileName = 'filename.png'
var changes
imageLoader.onchange = function handleImage(e) { //handling our image picker <input>:
var reader = new FileReader();
reader.onload = function(event) {
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
save.onclick = function() {
if (jcp && jcp.active) {
var i = 0;
for (let area of jcp.crops) {
i++;
let naturalWidth = img.naturalWidth;
let naturalHeight = img.naturalHeight;
let scaleX = naturalWidth / img.width
let scaleY = naturalHeight / img.height
let canvasSave = document.createElement("canvas");
var ctxSave = canvasSave.getContext('2d');
canvasSave.width = area.pos.w * scaleX
canvasSave.height = area.pos.h * scaleY
ctxSave.drawImage(img, -area.pos.x * scaleX, -area.pos.y * scaleY, naturalWidth, naturalHeight)
var link = document.createElement('a');
link.download = fileName;
link.href = canvasSave.toDataURL("image/png")
link.click();
alert('file save')
}
}
};
Jcrop.load('target').then(img => {
jcp = Jcrop.attach(img, {
multi: true,
});
changes = img.nextSibling
observer.observe(changes, config);
});
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
} else if (mutation.type === 'attributes') {
updatePreview()
}
}
};
const observer = new MutationObserver(callback);
const config = {
attributes: true,
childList: true,
subtree: true
};
function updatePreview() {
if (jcp && jcp.active) {
var i = 0;
for (let area of jcp.crops) {
canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
//for preview
canvas.width = area.pos.w
canvas.height = area.pos.h
ctx.drawImage(img, -area.pos.x, -area.pos.y, img.width, img.height)
}
}
}<head>
<title>Jcrop Example</title>
<link href="https://unpkg.com/jcrop@3.0.1/dist/jcrop.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/jcrop@3.0.1/dist/jcrop.js"></script>
</head>
<body>
<div><a id="save">Save</a>
<input type="file" id="imageLoader" name="imageLoader" />
<!-- add this for file picker -->
</div>
<div>
<h1 style="font-family:Helvetica,sans-serif;">
Image Crop <span style="color:lightgray;"></span>
</h1>
<img id="target" style="background-size: cover !important;" width='500'>
<div style='width:100%;'>
<canvas id="canvas" style='border: 4px solid blue;' />
</div>
</div>
</body>