实现 Javascript 图像调整大小

Question

我正在尝试修复 Canvas Resize (Downscale) Image，我得到了 jsfiddle 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函数，里面可以使用resize代码。 更新代码：

$(".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">