Question

我正在使用fabric.js。我在画布上上传了多个图片。上传图片后。然后画布通过toDataURL()转换为图像。我想将此转换后的图片粘贴到尺寸为2000x2000的T恤上。但是这张图片尺寸很小，当我试图增加它的尺寸时，由于拉伸而变得模糊

我需要用户上传的相同尺寸的图片，而不是按比例缩小的图片放大的版本。例如，如果用户从画布上传了大小为1500x1500的图片，则我需要的是尺寸为2000x2500的图片，而不是400x400。

我见过99Thsirts.com网站，但我不知道如何办理护照尺寸图片。

我只想清理Uploaded自定义图像（不模糊），因为我正在实现自定义T恤。

＆＃13;

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;  
    var img = document.createElement('img');
    img.src = data;
    img.onload = function () {
      if (img.width < 1000 || img.height < 1000)
      {
        alert("upload image should be greater then 1000px*1000px");
        canvas.getActiveObject().remove();
      }
    };

    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100,width:100, height: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();
}

＆＃13;

canvas{
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

https://jsfiddle.net/varunPes/8gt6d7op/21/

请分享您的想法。

Answer 1

如果您将图像调整为100x100像素，那么您将拥有100x100图像。加载图像时，请勿更改图像的宽度和高度。此外，没有理由使用图像onload函数和imageFromURL函数。

这样说，加载你的图像，将其缩放到90px的宽度（现在你做100并且缩放为0.9，因此是90px），将它放在画布上。

画布为400px，当您导出它时，您将指定乘数5以获得2000px画布。图像将被拉伸而不会失去其原始分辨率。当然，它的标准分辨率不会提高。

InComplete

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;  
    var img = document.createElement('img');
    img.onload = function () {
      if (img.width < 1000 || img.height < 1000)
      {
        alert("upload image should be greater then 1000px*1000px");
        return;
      }
      var oImg = new fabric.Image(img);
      var oImg = oImg.set({left: 50, top: 100, angle: 00}).scaleToWidth(90);
      canvas.add(oImg);
      canvas.setActiveObject(oImg);
    };
    img.src = data;
  };
  reader.readAsDataURL(file);
});
document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll();
  document.querySelector('#preview').src = canvas.toDataURL({multiplier: 5});
}

canvas{
  border: 1px solid black;
}

在画布上保留原始图像质量

1 个答案: