Error "The operation couldn't be completed. (WebkitBlobResource error 1.)" on iOs.

[klawdyo]

Hi.
Does anyone having this issue?
I am trying to save image with a sticker on ios.
On Android and windows with chrome is fine.

The error.

My component:

<template>
  <div class="image-container">
    <div style="position:relative" :style="`width:${size}px;height:${size}px`">
      <croppa
        accept="image/*"
        class="croppa"
        placeholder
        :placeholder-font-size="18"
        :show-remove-button="false"
        remove-button-color="grey"
        :remove-button-size="24"
        :prevent-white-space="true"
        :initial-image="initialImageUrl"
        :height="size"
        :width="size"
        :quality="quality"
        v-model="picture"
        @new-image-drawn="onChangeImage"
        @image-remove="onChangeImage"
        @draw="onDraw"
      ></croppa>

      <v-fade-transition>
        <!-- <img
          crossorigin
          class="addon"
          v-if="frameUrl"
          :src="frameUrl"
          :key="frameUrl"
          :width="size+1"
          :aspect-ratio="1"
          style="position:absolute;top:0;left:0"
        />-->
      </v-fade-transition>
    </div>
  </div>
</template>

<script>
// Vue Croppa
import Vue from "vue";
import "vue-croppa/dist/vue-croppa.css";
import Croppa from "vue-croppa";
Vue.use(Croppa);

export default {
  //
  components: {},

  //
  data: () => ({
    // Objeto do vue-croppa contendo tudo
    picture: {},
    // Imagem que é usada dentro do vue-croppa
    initialImageUrl: null,
    // URL da imagem de moldura
    frameUrl: null,
    // Dimensões
    quality: 2,
    noSticker: true,
    timeOut: null
  }),

  //
  computed: {
    size() {
      if (this.$vuetify.breakpoint.smAndDown) {
        this.quality = 1080 / this.$vuetify.breakpoint.width;
        return this.$vuetify.breakpoint.width - 24;
      }
      this.quality = 2;
      return 540;
    }
  },

  //
  methods: {
    /**
     * Tem imagem selecionada?
     */
    hasImage() {
      return this.picture.hasImage();
    },

    /**
     * Recebe uma ação iniciada pelos botões de edição e que
     * será realizada pelo vue-croppa na imagem selecionada
     */
    editButtonsClick(actionName) {
      // Se tiver alguma imagem selecionada
      if (!this.picture.hasImage()) {
        this.$emit("message", "Nenhuma imagem selecionada");
        return;
      }

      // Seleciona
      switch (actionName) {
        case "rotate-right":
          this.picture.rotate();
          break;

        case "rotate-left":
          this.picture.rotate(-1);
          break;

        case "flip-x":
          this.picture.flipX();
          break;

        case "flip-y":
          this.picture.flipY();
          break;

        default:
          break;
      }
    },

    /*
     * Força a abertura do selecionador de arquivos do vue-croppa
     */
    croppaClick() {
      if (this.picture) this.picture.chooseFile();
    },

    /**
     * Recebe a imagem como um frame do vídeo, devendo ser
     * convertido para imagem e inserido no visualizador do
     * vue-croppa
     */
    setPicture(video) {
      var canvas = document.createElement("CANVAS");

      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas
        .getContext("2d")
        .drawImage(video, 0, 0, canvas.width, canvas.height);

      this.initialImageUrl = canvas.toDataURL();

      this.picture.refresh();
    },

    /**
     * Recebe a imagem via vue croppa como base64
     * e insere nele mesmo
     */
    setPictureFromBase64(base64) {
      console.log("entrou em  setPictureFromBase64");
      this.initialImageUrl = "data:image/png;base64," + base64;
      this.picture.refresh();
    },

    /**
     * Emite o evento ao trocar a imagem dentro do vue-croppa
     */
    onChangeImage() {
      this.$emit("image-changed", this.hasImage());
    },

    addFrame(url) {
      // console.log("tica", url);

      this.frameUrl = url;
      this.picture._draw();
    },

    clearFrame() {
      this.frameUrl = null;
      this.picture._draw();
    },

    onDraw(ctx) {
      if (this.timeOut) clearTimeout(this.timeOut);

      this.timeOut = setTimeout(() => {
        // console.log("ondraw", this.frameUrl);

        if (!this.frameUrl) return;
        const size = this.size * this.quality;

        var image = new Image(size, size);
        image.onload = () => {
          ctx.imageSmoothingEnabled = true;
          ctx.restore();
          ctx.drawImage(image, 0, 0, size, size);
        };
        image.crossOrigin = true;
        image.src = this.frameUrl;
      });

      // ctx.restore();
      // ctx.drawImage(document.querySelector(".addon"), 0, 0, size, size);
      // ctx.save();
    },

    /**
     * Salva a imagem no disco
     *
     */
    saveImage(size, type, compressionRate) {
      // console.log("ao salvar", this.frameUrl);

      this.picture._draw();
      this.picture.generateBlob(
        blob => {
          var url = URL.createObjectURL(blob);
          console.log(url);
          var a = document.createElement("a");
          a.download = "filename";
          a.href = url;
          a.click();
          URL.revokeObjectURL(url);
          // console.log("acabou dentro");
        },
        type,
        compressionRate
      );

      // console.log("acabou fora");
    }
  }
};
</script>

<style scoped>
.croppa {
  background-color: white;
  border: 1px solid #ededed;
  box-sizing: border-box;
}

.canvas {
  display: none;
}
</style>

This page can be accessed on https://staging.candidapp.com.br