使用javascript调整图像大小

萨兰加

我正在使用javascript函数输入图像。

这是我的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;" />

这是我的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]);
  }
}

此代码将图像转换为叮咬阵列,我需要使用该叮咬阵列调整图像大小。有没有可能的方法来做到这一点。

我将把该二进制数组传递给Web服务。如果图像尺寸太大,需要很多时间,这就是为什么我需要转换。

像这样在画布上调整大小:

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]);
  }
}

我还没有测试过,但是应该可以。

使用javascript画布调整图像大小(平滑)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用PHP直接从URL调整图像大小

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

如何使用PHP批量调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用URL调整WordPress中图像的大小

来自分类Dev

在Ubuntu上使用convert调整图像的大小

来自分类Dev

如何使用Bootstrap调整图像大小

来自分类Dev

调整NSAttributedString中使用的图像的大小

来自分类Dev

使用空白来源调整图像大小

来自分类Dev

使用位图调整大图像大小的OutOfMemoryException

来自分类Dev

使用createjs / easyljs调整图像大小

来自分类Dev

如何使用Jquery / javascript根据视图端口大小调整图像大小

来自分类Dev

上传前使用画布调整图像大小

来自分类Dev

使用Pillow Python调整图像大小

来自分类Dev

使用AlamofireImage调整下载图像的大小

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

使用ImageMagick和CloudConvert调整图像大小

来自分类Dev

如何使用python下载调整大小的图像?

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

使用Shell脚本调整图像大小

来自分类Dev

使用GParted调整分区图像的大小?

来自分类Dev

如何使用PHP批量调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用imagemagick调整图像大小

来自分类Dev

使用Java调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

javascript图像地图大小调整问题

来自分类Dev

使用 javascript 调整图像大小

来自分类Dev

如何在使用 Javascript 提交图像之前在 Django Imagefield 中调整图像大小

Related 相关文章

热门标签

归档