在angular 6应用程序中通过javascript更改base64图像大小并下载不同扩展名（png、jpg、gif等）

我想根据大小选择更改我的base64图像大小（宽度/高度），然后使用不同的扩展名（如jpg、png、gif等）下载

我正在尝试通过html5下载标签下载图像

---

我想下载具有动态维度的不同扩展名。

首先，我在html文件中创建了一个单击功能

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

---

这是我自己问题的解决办法。感谢您的收看。

只需使用此软件包

图像

https://www.npmjs.com/package/images

---

支持图像质量、大小、扩展操作选项，节省您的时间

我们总是很乐意帮助和支持新的程序员，但你需要先帮助自己。之后，如果您有问题，请发布您尝试过的内容，并清楚解释哪些内容不起作用，然后提供。请阅读，抱歉信息太少，我从我这边得到了解决方案@罗里姆克罗桑

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);
  // ********************************************
}
}