[英]resize image using javascript
I'm using javascript function to input image. 我正在使用javascript函数输入图像。
This is my HTML: 这是我的HTML:
<input type="file" name="filUpload" id="filUpload" onclick="" onchange="showimagepreview(this)">
<br />
<div id="before">
<img id="imgprvw" alt="" class="img-thumbnail" style="width: 250px; height: 250px;" />
And this is my JavaScript: 这是我的JavaScript:
function showimagepreview(input) { //image preview after select image
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
url = e.target.result;
image = url;
$('#imgprvw').attr('src', url);
//console.log(url);
//$('#imgprvw').attr('src', e.target.result);
//url = e.target.result;
//$("#imgpath").val(url);
}
filerdr.readAsDataURL(input.files[0]);
}
}
This code convert image to bite array, I need to resize my image using that bite array. 此代码将图像转换为叮咬阵列,我需要使用该叮咬阵列调整图像大小。 Is there any possible methods to do it.
有没有可能的方法来做到这一点。
I will pass that binary array to web service. 我将把该二进制数组传递给Web服务。 I the image size too high, it takes much time, that's why I need to convert.
如果图像尺寸太大,需要很多时间,这就是为什么我需要转换。
Resize it on the canvas like this: 像这样在画布上调整大小:
function showimagepreview(input) { //image preview after select image
if (input.files && input.files[0]) {
var filerdr = new FileReader();
filerdr.onload = function(e) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 250;
canvas.height = canvas.width * (img.height / img.width);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// SEND THIS DATA TO WHEREVER YOU NEED IT
var data = canvas.toDataURL('image/png');
$('#imgprvw').attr('src', img.src);
//$('#imgprvw').attr('src', data);//converted image in variable 'data'
}
img.src = e.target.result;
}
filerdr.readAsDataURL(input.files[0]);
}
}
I haven't tested this yet, but it should work. 我还没有测试过,但是应该可以。
Resize image with javascript canvas (smoothly) 使用javascript画布调整图像大小(平滑)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.