Измените размер изображения base64 и загрузите с другим расширением (png, jpg, gif и т. Д.) С помощью javascript в приложении angular 6

Question

Я хочу изменить размер изображения base64 (ширина / высота) в соответствии с выбранным размером, а затем загрузить его с различными расширениями, такими как jpg, png, gif и т. Д.

Я пытаюсь загрузить изображенияот html5 скачать теги.

Я хочу скачать в разных расширениях с динамическим измерением.

Answer 1

Просто используйте этот пакет Images https://www.npmjs.com/package/images поддерживает качество изображения, размер, параметры манипуляции расширениями, экономит ваше время !!

Answer 2

Сначала я создаю функцию щелчка в моем html-файле.

<button type="submit" (click)="imgDownload()" class="btn btn-primary">Download</button>

Затем я пишу функцию в моем файле component.ts.

imgDownload() {
// ********************************************
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = 200; // target width
canvas.height = 200; // target height

const image = new Image();
image.src = jQuery('img').attr('src'); // ***get default iamge base64
ctx.drawImage(image,
  0, 0, image.width, image.height,
  0, 0, canvas.width, canvas.height
);
// create a new base64 encoding
const resampledImage = new Image();
resampledImage.src = canvas.toDataURL();    // ****get converted image base64 src
this.download (resampledImage.src); }
// ********************************************


download (imgLink){
if (this.imgType === 'jpeg' || this.imgType === 'png' || this.imgType === 'gif') {
  // ***************************************************
  const clearUrl = linkAncher => linkAncher.replace(/^data:image\/\w+;base64,/, '');

  const downloadImage = (name, content, type) => {
    const linkAncher = document.createElement('a');
    linkAncher.style = 'position: fixed; left -10000px;';
    linkAncher.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
    linkAncher.download = /\.\w+/.test(name) ? name : `${name}.${type}`;


    document.body.appendChild(linkAncher);
    linkAncher.click();
    document.body.removeChild(linkAncher);
  };
  downloadImage(this.itemName + '_QR_code', clearUrl(imgLink), this.imgType);
  // ********************************************
}
}

Это решение для менявопрос. Спасибо за просмотр.