js、html前端pc端根据url点击下载图片

直接复制下面代码进去就能用了(变量只有imgsrc和文件名)

当然也有通过通过a标签下载的(有坑,也不适用手机端,另外a标签可以实现base64图片的下载),所以还是看我的代码吧
在这里插入图片描述

这才是我的代码

uploadPoster(imsrc,name) {
    
    
            let imgsrc='https://res.xxxxx.com/adf442a7-1080-4c01-bf3b-f2cewea5f78b6d.png'
            try{
    
    
                let image = new Image();
                // 解决跨域 Canvas 污染问题
                image.setAttribute("crossOrigin", "anonymous");
                image.onload = function() {
    
    
                    let canvas = document.createElement("canvas");
                    canvas.width = image.width;
                    canvas.height = image.height;
                    let context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0, image.width, image.height);
                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                    let a = document.createElement("a"); // 生成一个a元素
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    a.download = name || "photo"; // 设置图片名称
                    a.href = url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                };
                image.src = imgsrc;
        
            }catch(e){
    
    
                console.log(e);
            }
        },

猜你喜欢

转载自blog.csdn.net/weixin_45629623/article/details/110526520