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

Question

I want to change my base64 image size(width/height) according to size selection and then download with different extensions like jpg, png, gif, etc....

I am trying to download images by html5 download tags.

I want to download in different extensions with a dynamic dimension.

Answer 1

First I create a click function in my html file.

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

Then I write function in my component.ts file.

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

This is a solution to my own question. Thanks for seeing it.

Answer 2

Simply use this package Images https://www.npmjs.com/package/images supports image quality, size, extensions manipulation options, saves you time!!