Canvas浏览器中下载图片

H5中强大的Canvas也可以用于在浏览器中下载图片

---

downloadImg () {
    let image = new Image();
    let canvas = document.createElement('canvas')
    image.onload = () => {
        canvas.width = image.width
        canvas.height = image.height
        const context = canvas.getContext('2d')
        context.drawImage(image,0,0,image.width,image.height)
        canvas.toBlob( (blob) => {
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = this.imageName + '.jpg'; // 自定义图片名称
            link.click();  
        }, "image/jpeg");
    }
    // 解决跨域 canvas 污染问题
    image.setAttribute('crossOrigin','anonymous')
    image.src = this.imagePath // 可直接访问的图片路径
}