Question

我有一个html5画布，其中将图像显示为350x450像素。

但是图片的实际尺寸为600x900像素。

如何保存为原始大小。

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  ctx.canvas.width = 350;
  ctx.canvas.height = 450;
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,100,100);
  };
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = canvas.toDataURL();

如您所见，当Im获得base64时，图像大小减小。我正在获取图片350x450。但我想将其保存为600x900。

有什么办法吗？

Answer 1

基本上，我在下面的代码中所做的是>

我正在创建一个带显示的临时画布元素：无样式，还将图像加载到其中并在显示原始画布时从中保存。

toggleColumns(visibleColumns: Array<any>) {
    if (visibleColumns) {
      this.visibleColumns = visibleColumns;
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.columns().every(function () {
          if (visibleColumns.indexOf(this.dataSrc()) !== -1 || this.dataSrc() === '_actions' || this.dataSrc() === 'selectAll') {
            this.visible(true);
          } else {
            this.visible(false);
          }
        });
      });

    }

HTML5 canvas保存实际尺寸的图像

1 个答案: