0

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

错误是：

错误 TS2339：“EventTarget”类型上不存在属性“文件”。

错误 TS2339：“EventTarget”类型上不存在属性“结果”。

错误 TS2339：“EventTarget”类型上不存在属性“结果”。错误 TS2540：无法分配给“cropper”，因为它是常量或只读属性。

错误 TS2339：“EventTarget”类型上不存在属性“文件”。

错误 TS2339：类型 '""' 上不存在属性 'getCroppedCanvas'。

错误 TS2339：“元素”类型上不存在属性“值”。

错误 TS2339：“元素”类型上不存在属性“src”。

错误 TS2339：“元素”类型上不存在属性“下载”。

我的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);
});

}
}

谢谢

4

0 回答 0