javascript - 提交时在 Aurelia 中定位图像并保存在 JSON 类型数组中

Question

我在 Aurelia 工作，我必须找到一张图像并在提交时保存在 JSON 类型数组中。

我不熟悉处理数组中的图像，因为数组无法处理图像，我们必须将图像转换为 base64 二进制文件，但我不知道如何执行此操作。你的帮助对我很有帮助。

<div>
  <div>
    <label>Active</label><br>
    <input type="checkbox">
  </div>
  <div class="mr-3">
    <a class="thumbnail">
      <img src="../../../assets/images/default-user.png" width="100" alt="">
    </a>
  </div>
  <div class="col-md-8">
    <div class="radio">
      <input type="radio" name="choice" checked> Keep
    </div>
    <div class="radio">
      <input type="radio" name="choice"> Change
    </div>
    <span class="form-group">
      <input type="file" class="mt-3" id="exampleInputFile" files.bind="">
    </span>
    <button class="btn btn-danger" click.delegate="submit()" >Submit</button>
  </div>

数组格式

this.list = {
      "a_Rows": [
        {
          "pkiCustomerID": "1",
          "simage": "",

        },

Answer 1

尝试使用 HTML5 Canvas(示例代码在 Typescript 中):

<input type="file" ... files.bind="selectedFiles" change.delegate="inputChange()">

在模板 JavaScript 中:

export class MyTemplate {
    selectedFiles!:FileList;

    inputChange() {
        let image = new Image();

        image.onload = function () {
            let elem = this as HTMLImageElement;

            let canvas = <HTMLCanvasElement> document.createElement('canvas');

            canvas.width = elem.naturalWidth;
            canvas.height = elem.naturalHeight;

            let context = <CanvasRenderingContext2D> canvas.getContext('2d');

            context.drawImage(elem, 0, 0);

            let stringImg = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');
        };

        let file = this.selectedFiles.item(0);
        if (file !== null)
            image.src = URL.createObjectURL(file);
    }
}

stringImg 就是你要找的结果。

更新:

将结果放回list的例子:

export class MyTemplate {
    private stringImg: string = '';    // <------ ADDED
    private list: any;                 // <------ ADDED
    selectedFiles!:FileList;

    inputChange() {
        let image = new Image();

        let _this = this;              // <------ ADDED
        image.onload = function () {
            let elem = this as HTMLImageElement;

            let canvas = <HTMLCanvasElement> document.createElement('canvas');

            canvas.width = elem.naturalWidth;
            canvas.height = elem.naturalHeight;

            let context = <CanvasRenderingContext2D> canvas.getContext('2d');

            context.drawImage(elem, 0, 0);

            _this.stringImg = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''); // <------ MODIFIED
        };                   

        let file = this.selectedFiles.item(0);
        if (file !== null)
            image.src = URL.createObjectURL(file);
    }

    submit() {                         // <------ ADDED
        this.list = {
            "a_Rows": [
                {
                    "pkiCustomerID": "1",
                    "simage": this.stringImg,
                },
            ]
        }
    }
}