编辑:我不想在客户端显示图像,目的是缩小图像和比例...
在必须将图像上传到服务器之前,我在调整使用表单中输入的文件选择的图像时遇到了一些问题。
我有以下代码监控我的文件输入:
// monitor file inputs and trigger event
$(document).on('change', '.btn-file :file', function() {
var F = this.files;
if(!isImage( F[0] ))
{
alert("Not an image file");
}
var fileurl = resizeImage(F[0]);
console.log(fileurl);
var input = $(this),label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [label]);
});
此函数将调用如下所示的 resizeImage:
function resizeImage(file)
{
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);
console.log(img.width);
var canvas = document.createElement('canvas');
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
console.log(ctx);
var dataurl = canvas.toDataURL("image/png");
return dataurl;
}
问题是,我的控制台日志告诉我调整大小函数的返回值是“data:”。然后我开始使用 console.log 来摆脱它,以缩小问题隐藏的范围。在我的 resizeImage 函数中,我记录了我的 img 元素的宽度,它给了我宽度 0,这不应该是正确的? ..我不知道我做错了什么..
最佳答案
如果您的目标浏览器支持 file
输入属性,那么您可以使用 URL.createObjectURL
创建一个图像源,您可以使用 canvas 元素对其进行操作。
给定最大所需尺寸maxW x maxH
,您可以计算调整图像大小的比例因子,同时保持原始纵横比,如下所示:
var scale=Math.min((maxW/img.width),(maxH/img.height));
这是示例代码和演示。
请注意,该演示确实将图像绘制到 Canvas 上,但您可以使用 document.createElement('canvas')
轻松替换内存中的 Canvas 。
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// limit the image to 150x100 maximum size
var maxW=150;
var maxH=100;
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var img = new Image;
img.onload = function() {
var iw=img.width;
var ih=img.height;
var scale=Math.min((maxW/iw),(maxH/ih));
var iwScaled=iw*scale;
var ihScaled=ih*scale;
canvas.width=iwScaled;
canvas.height=ihScaled;
ctx.drawImage(img,0,0,iwScaled,ihScaled);
alert(canvas.toDataURL());
}
img.src = URL.createObjectURL(e.target.files[0]);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<input type="file" id="input"/>
<br>
<canvas id="canvas" width=300 height=300></canvas>
关于javascript - 在发送到 BASE64 之前调整图像大小(不使用 img 元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30902360/