将画布转换为HTML5中固定大小的图像

Question

我正在使用HTML5。现在我通过toDataURL将画布转换成图像。但我希望这个画布转换成不同的大小。例如，我的画布尺寸为 450px * 450px ，那么它应转换为 1000px * 1000px 。

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,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, width:1000, height:10000});
      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="400" height="400"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

我试过canvas.toDataUrl（{format：'png'，质量：0.8，宽度：1000， 身高：1000}）但它不起作用。

DEMO JSFIDDLE。 https://jsfiddle.net/varunPes/8gt6d7op/13/

预期结果：

Answer 1

只需将width:1000, height:1000添加到var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);

即可

完整代码：

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: 0, top: 0, angle: 00}).scale(0.9);
      canvas.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
    });
  };
  reader.readAsDataURL(file);
});

document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  increaseImg(canvas.toDataURL(), function(dataURL) {
    document.querySelector('#preview').src = dataURL;
  });
}

function increaseImg(src, callback) {
  var n_canvas = $('<canvas width="1800" height="2000" />')[0],
      n_ctx = n_canvas.getContext('2d'),
      n_img = new Image();

  n_img.onload = function() {
    n_ctx.drawImage(n_img, 0, 0, n_canvas.width, n_canvas.height);
    callback(n_canvas.toDataURL());
  }

  n_img.src = src;
}

canvas{
  border: 1px solid black;
}

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

Answer 2

查看https://jsfiddle.net/8gt6d7op/14/是否有效。 toDataURL仅适用于画布中的任何内容，因此您无法指定大小。尺寸已经在画布中。

您可以使用您想要的第二个画布，并使用它来填充图像。

<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" />
<canvas id="canvas2" width="1000" height="1000" style="display:none;"></canvas>

var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.Canvas('canvas2');
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();
      canvas2.add(oImg).renderAll();
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas2.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();
  canvas2.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas2.toDataURL();
}

Answer 3

您的代码很好，不需要做任何大的改动。 如果要以各种尺寸导出图像，请尝试此操作。

我创建了两个导出链接，一个用于宽度500，另一个用于1000。 如您所见，您可以直接导出图像而不是画布。

＆＃13;

＆＃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;                    
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 50, top: 100, angle: 00}).scale(0.9);
      canvas.add(oImg);
    });
  };
  reader.readAsDataURL(file);
});

document.querySelector('#txt').onclick = function (e) {
  _export(e, 500);
}

document.querySelector('#txt2').onclick = function (e) {
  _export(e, 1000);
}

function _export(e, width) {
  e.preventDefault();
  var a = canvas.getActiveObject();
  canvas.deactivateAll().renderAll();
  var mult = width / a.width;
  document.querySelector('#preview').src = a.toDataURL({multiplier: mult});


}

＆＃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!! 500</a><br />
<a href='' id='txt2' target="_blank">Click Me!! 1000</a>
<br />
<img id="preview" />

＆＃13;

＆＃13;

＆＃13;