实现Javascript图像大小调整

Question

我试图修复画布大小调整(缩小)图像，我得到了小提琴http://jsfiddle.net/EWupT/图像大小调整。当用户上传即时图像显示在输入字段上时，我有html输入字段，当在我的现有代码上添加调整大小代码时，我得到了一个错误。任何帮助都非常感谢。

我的JS：

    $(document).ready(function() {
    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                canvas.width=300;
                canvas.height=234;
                ctx.drawImage(reader, 0, 0, 300, 234);

                $('.profile-pic').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".file-upload").on('change', function(){
        readURL(this);
    });
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});

我的HTML：

<div class="upload-button" id="imageresize"><img class="profile-pic"  src="../images/add-image.png" /></div>
<input id="formFile" id="avatar-2" class="file-upload" type="file" name="my_file"  accept="image/*">

我发现了一个错误：

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.
    at FileReader.reader.onload

Answer 1

增加了filereader.onload函数，在里面我们可以使用调整大小的代码。更新代码：

$(".upload-button").on('click', function() {
  $(".file-upload").click();
});
var fileReader = new FileReader();

fileReader.onload = function(event) {
  var image = new Image();

  image.onload = function() {
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 380;
    //canvas.height=image.height/1;

    $('#upload-preview').width(500); //pixels

    var hRatio = canvas.width / image.width;
    var vRatio = canvas.height / image.height;
    var ratio = Math.min(hRatio, vRatio);

    context.drawImage(image, 0, 0, image.width, image.height, 0, 0,
      image.width * ratio, image.height * ratio
    );

    document.getElementById("upload-preview").src = canvas.toDataURL();
  }
  image.src = event.target.result;
};

var uploadImage = function() {
  var uploadImage = document.getElementById("upload-Image");

  if (uploadImage.files.length === 0) {
    return;
  }

  var uploadFile = document.getElementById("upload-Image").files[0];
  fileReader.readAsDataURL(uploadFile);
}

Answer 2

由于您正在使用new Image()函数并动态生成HTMLImageElement对象，因此在onload函数之后添加img.src，如下所示：

img = new Image();
img.onload = function(){
  var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width=300
    canvas.height=234
    ctx.drawImage(img, 0, 0, 300, 234);
    document.body.appendChild(canvas);
};
img.src = 'http://i.imgur.com/SHo6Fub.jpg';

<img src="http://i.imgur.com/SHo6Fub.jpg" width="300" height="234">

​