Внешний интерфейс автоматически генерирует изображения и загружает их (менее 60 строк кода).

Процесс предварительного просмотра

输入图片说明

нужно

Потому что необходимо обработать некоторое простое сшивание изображений (около 8000 изображений), но не может быть найдено подходящее программное обеспечение для дурака, которое хорошо удовлетворяло бы потребности.В то же время также очень хлопотно, что библиотека обработки изображений в nodejs в основном не проста использовать. , а установка трудоемкая и трудоемкая (конечно, я ее все же установил). Как начинающий интерфейс, разве не было бы замечательно, если бы его можно было реализовать непосредственно на странице интерфейса, не полагаясь на другие вещи? Отсюда и эта маленькая попытка. На самом деле это очень просто, просто запишите это в этой статье, боюсь, что в дальнейшем вы это не забудете.

Прелюдия

1. Из-за ограничений безопасности холста мы должны обеспечить, чтобы ресурсы и веб-страницы находились под тем же доменным именем, в противном случае нет проблем на рисунке, но экспортировка будет сообщать об ошибке «Canvas загрязнена». Таким образом, у нас есть многочисленные решения:

Nodejs строит локальный сервер, все ресурсы находятся в одном домене. Особенности: подходит для развертывания и использования в Интернете, но вызывает затруднения
Удалите междоменные ограничения Chrome локально (используя параметры запуска Chrome). Особенности: Просто и грубо, решать проблемы локально и быстро, но подходит только для собственного использования
добавлен тег imgimg.setAttribute('crossOrigin', 'anonymous'). Особенности: Может решить текущую проблему, но есть скрытые опасности
Используйте new FileReader(); для чтения запрошенных данных большого двоичного объекта в адрес base64. Особенности: Код увеличен, других недостатков не обнаружено
Используйте URL.createObjectURL(res) для чтения запрошенных данных большого двоичного объекта в адрес типа большого двоичного объекта. Особенности: Код добавлен, а заодно и запомнитьURL.revokeObjectURL Отмените ассоциацию, и никаких других недостатков не обнаружено.

Выше приведены пять решений, которые я лично исследовал и которые подходят для нужд различных сценариев.

Первые два примера неудобно показывать, а ниже приведены соответствующие примеры кода трех методов:

let can = document.getElementById('canvas');
let ctx = can.getContext('2d');
fetch('https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg').then(
      res => res.blob())
    .then(res => {
      let fr = new FileReader();//https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
      fr.onload = function (e) {
        console.log(e)
        console.log(e.target.result)
        let img = new Image();
		//第一种办法
        // img.setAttribute('crossOrigin', 'anonymous');
        // img.src =
        //   'https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg'
        //第二种办法
        // img.src = e.target.result; //转成base64
        //第三种办法
        // img.src = URL.createObjectURL(res);//转成Blob地址ObjectUrl

        img.onload = function () {
          ctx.drawImage(img, 0, 0)
          console.log(can.toDataURL())//导出成dataurl
          // canvas.toBlob(function (blob) {//导出成blob地址
          //   var url = URL.createObjectURL(blob);
          //   console.log(url)
          // });
        }
      }
      fr.onerror = function () {
        console.log('读取错误！')
      }
      fr.readAsDataURL(res)//如果是转文字，第二个参数可以使用编码
    })

основной

Суть всего процесса здесь такова: используйте адрес base64 или виртуальный адрес createObjectURL для заполнения содержимого на холсте, чтобы он не был загрязненным холстом.

Идеальный экспорт

С предыдущим предварительным процессом мы можем начать выполнять загрузку, просто используя загрузку тега a. В то же время следует отметить, что атрибут загрузки тега a не поддерживает кросс-доменность, но в нашем случае он не будет включать кросс-доменность (данные холста генерируются с этой страницы).

Как сделать пакетный экспорт?

Здесь следует отметить, что поскольку у нас есть некоторые асинхронные ссылки, мы хотим использовать Async await для реализации их последовательного выполнения. В этом случае он будет выполняться по порядку, а браузер запоминает открытие для разрешения автоматических загрузок (в локальной среде могут быть подсказки, но если вы возьмете локальный хостинг, проблем не будет)

пример:

  (async () => {
    let result = []
    let arr = []
    for (let i = 0; i < arr.length; i++) {
      await new Promise((res, rej) => {
        setTimeout(() => {
          res()
        }, 10)
      })
      try {
        await createImg(arr[i]).catch(err => {
          result.push(arr[i])
          console.log(arr[i], '服务器端响应出错，无法获取图片')
        })
      } catch (e) {
        result.push(arr[i])
        console.log(arr[i], '程序处理时无法处理图片', '原因：', e)
      }
    }

    document.body.innerText = result.join("")

  })()


  function createImg(article) {
    return new Promise((res, rej) => {
      let temp = new Image()
      temp.src = 'http://XXXXXX/getpic?type=touming&article=' + article;
      temp.onerror = function () {
        rej(article)
      }
      temp.onload = function () {
        ctx.drawImage(temp, 940, 90, 650, 650);
        var bloburl = canvas.toDataURL('image/jpeg');
        var anchor = document.createElement('a');
        anchor.href = bloburl;
        anchor.download = article;
        anchor.click()
        ctx.rect(0, 0, 2000, 800);
        ctx.fillStyle = "rgb(236,237,239)";
        ctx.fill();
        res()
      }
    })
  }

Ступайте на яму:

Здесь я должен обратить внимание на онлайн-объект объекта IMAGE, потому что обещание, ожидающее Async AWAIT, не знает об ошибке сервера захвата (если сервер не работает, скрипт перестанет сообщать об ошибке), поэтому нам нужно ввести в OneRror, затем Reject, promise может получить сообщение об ошибке, тогда лучше Catch. В то же время, чтобы предотвратить сложные остановки ошибок, TRY Catch гарантирует, что ошибки могут быть приняты.