我想根据尺寸选择更改base64图像的尺寸（宽度/高度），然后使用jpg，png，gif等不同的扩展名进行下载。
我正在尝试通过html5下载标签下载图像。
我想以动态尺寸下载不同的扩展名。
chen362015 回答：更改base64图像大小并通过angular 6应用程序中的javascript下载具有不同扩展名（png，jpg，gif等）的文件
首先，我在html文件中创建一个click函数。
<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,image.width,image.height,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);
// ********************************************
}
}
这是我自己的问题的解决方案。感谢您的观看。
,只需使用此软件包Images https://www.npmjs.com/package/images
支持图像质量，大小，扩展程序操作选项，节省您的时间！