Question

我为AngularCli项目使用croperjs进行图像裁剪。但是有一些错误..我试了好几次但它仍然在那里我该怎么做才能修复它？

错误是：

错误TS2339：属性＆＃39;文件＆＃39;类型＆＃39; EventTarget＆＃39;。
上不存在
错误TS2339：属性＆＃39;结果＆＃39;类型＆＃39; EventTarget＆＃39;。
上不存在
错误TS2339：属性＆＃39;结果＆＃39;类型＆＃39; EventTarget＆＃39;中不存在。   错误TS2540：无法分配给＆＃39; cropper＆＃39;因为它是常量或只读属性。

错误TS2339：属性＆＃39;文件＆＃39;类型＆＃39; EventTarget＆＃39;。
上不存在
错误TS2339：属性＆＃39; getCroppedCanvas＆＃39;类型＆＃39;＆＃34;＆＃34;＆＃39;。
上不存在
错误TS2339：属性＆＃39;值＆＃39;类型＆＃39;元素＆＃39;上不存在。

错误TS2339：属性＆＃39; src＆＃39;类型＆＃39;元素＆＃39;上不存在。

错误TS2339：属性＆＃39;下载＆＃39;类型＆＃39;元素＆＃39;上不存在。

我的html文件是：

<body>
<main class="page">
    <h2>Upload,Crop and save.</h2>
    <!-- input file -->
    <div class="box">
        <input type="file" id="file-input">
    </div>
    <!-- leftbox -->
    <div class="box-2">
        <div class="result"></div>
    </div>
    <!--rightbox-->
    <div class="box-2 img-result hide">
        <!-- result of crop -->
        <img class="cropped" src="" alt="">
    </div>
    <!-- input file -->
    <div class="box">
        <div class="options hide">
            <label> Width</label>
            <input type="number" class="img-w" value="300" min="100" max="1200" />
        </div>
        <!-- save btn -->
        <button class="btn save hide">Save</button>
        <!-- download btn -->
        <a href="" class="btn download hide">Download</a>
    </div>
</main>
</body>

我的ts文件是：

declare var Cropper: any;
....code here...
export class SixComponent implements OnInit {
rec = {}
handlesSize: any;
currentHandle: false;
drag: false;


//@ViewChild('layout1') canvas;
constructor() { }

ngOnInit() {

const result = document.querySelector('.result'),
  img_result = document.querySelector('.img-result'),
  img_w = document.querySelector('.img-w'),
  img_h = document.querySelector('.img-h'),
  options = document.querySelector('.options'),
  save = document.querySelector('.save'),
  cropped = document.querySelector('.cropped'),
  dwn = document.querySelector('.download'),
  upload = document.querySelector('#file-input'),
  cropper = '';

// on change show image with crop options
upload.addEventListener('change', (e) => {
  debugger;
  if (e.target.files.length) {
    // start file reader
    const reader = new FileReader();
    reader.onload = (e) => {
      if (e.target.result) {
        // create new image
        let img = document.createElement('img');
        img.id = 'image';
        img.src = e.target.result
        // clean result before
        result.innerHTML = '';
        // append new image
        result.appendChild(img);
        // show save btn and options
        save.classList.remove('hide');
        options.classList.remove('hide');
        // init cropper
        cropper = new Cropper(img);
      }
    };
    reader.readAsDataURL(e.target.files[0]);
  }
});

// save on click
save.addEventListener('click', (e) => {
  e.preventDefault();
  // get result to data uri
  let imgSrc = cropper.getCroppedCanvas({
    width: img_w.value // input value
  }).toDataURL();
  // remove hide class of img
  cropped.classList.remove('hide');
  img_result.classList.remove('hide');
  // show image cropped
  cropped.src = imgSrc;
  dwn.classList.remove('hide');
  dwn.download = 'imagename.png';
  dwn.setAttribute('href', imgSrc);
});

}
}

谢谢

在AngularCli项目中使用Cropperjs时出错

0 个答案: