在 canvas 中自动调整图像，如果图像分辨率在 Html5 中大于 canvas 尺寸

Question

我正在使用 Html5、fabric.js 和 Java 脚本。我在 canvas 中上传多张图片，但有时上传的图片大于 canvas。我想要固定尺寸的图片。

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
      console.log("aaaaaaaaaaa" + dataURL);

      //                        console.log("Canvas Image " + dataURL);
      //                        document.getElementById('txt').href = dataURL;

    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
}

canvas{
  border: 1px solid black;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

上传前:

上传后：

我希望每张图片都固定大小。上传图片后，用户可以更改尺寸、角度等属性。

Answer 1

在您的代码中添加特定尺寸的高度和宽度，如下所示。

var oImg = img.set({width: 150, height: 150, left: 50, top: 100, angle: 00}).scale(0.9);

Answer 2

如果我对问题的理解正确，您可以通过将这些参数（width 和 height）传递给函数 img.set 来将图像调整为您想要的大小。

img.set({... width:100, height:100});

完整代码：

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (f) {
    var data = f.target.result;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100, angle: 00, width:100, height:100}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
      console.log("aaaaaaaaaaa" + dataURL);

      //                        console.log("Canvas Image " + dataURL);
      //                        document.getElementById('txt').href = dataURL;

    });
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
}

canvas{
  border: 1px solid black;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

在 canvas 中自动调整图像，如果图像分辨率在 Html5 中大于 canvas 尺寸

Auto adjust image in canvas, If image resolution is larger than canvas size in Html5

html

javascript

css

canvas

fabricjs