博客

今天遇到个二维码下载问题，下载下来的二维码扫描后失效，记录一下：

解决办法就是把src换成绝对路径

图片下载（二维码）


方法一：

function getImageDataURL(downloadName,url){
	const tag = document.createElement('a');
    //图片下载时的名称，注意：名称中不能有半角点，否则下载时后缀名会错误
    tag.setAttribute('download',downloadName.replace(/\./g,'.'));
    const image = new Image();
    //设置图片的url，添加时间戳，防止浏览器缓存图片
    image.src = url+'?time='+new Date().getTime();
    //设置crossOrigin属性，否则图片跨域会报错
    image.setAttribute('crossOrigin','Anonymous');
    //图片未加载完成时会报错
    image.onload = ()=>{
        tag.href = getImageDataURL(image);
        tag.click();
    }
}
function getImageDataURL(image){
	//创建画布
	const  canvas = document.createElement('canvas');
	canvas.width = image.width;
	canvas.height = image.height;
	const ctx = canvas.getContext('2d');
	//以图片为背景裁剪画布
	ctx.drawImage(image,0,0,image.width,image.height);
	//获取图片后缀名
	const extension = image.src.substring(image.src.lastIndexOf('.')+1).toLowerCase();
	//如果图片没有后缀则默认png
	return canvas.toDataURL('image/'+extension,1);

}

方法二：

// 获取要下载的图片
var img = document.getElementById('testImg'); 
// 获取图片地址
var url = img.src;                     
// 创建一个a节点插入的document       
var a = document.createElement('a');          
// 模拟鼠标click点击事件
var event = new MouseEvent('click')        
// 设置a节点的download属性值   
a.download = 'beautifulGirl'                  
// 将图片的src赋值给a节点的href
a.href = url;                           
// 触发鼠标点击事件      
a.dispatchEvent(event)                        

方法三：

var img = $('#testImg').attr("src");
var alink = document.createElement("a");
alink.href = img;
alink.download = data.gzlogo;
alink.click();

方法四：

var url = document.getElementById('testImg').src;
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.responseType = "blob"; // 请求返回的数据类型
xmlhttp.onload = function() {
    if (this.status == 200) {
        var blob = this.response;
        var img = document.createElement("img"); // 预览图片
        img.onload = function(e) {
            window.URL.revokeObjectURL(img.src);
        };
        img.src = window.URL.createObjectURL(blob);
        document.body.appendChild(img);
        var a = document.createElement('a'); // 下载图片
        a.href = window.URL.createObjectURL(blob); //图片地址
        a.download = 'test.jpg'; // 图片名字
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }
}
xmlhttp.send();

方法六：

// 生成一个 a 标签
var downloadName = data.gzlogo;
// 获取要下载的图片
var img = document.getElementById('testImg');
var src = img.src;
const a = document.createElement("a");
a.download = downloadName || "图片";
a.style.display = "none";
const image = new Image();
image.src = src + "?v=" + Math.random();
image.crossOrigin = "*";
image.onload = () => {
   const base64 = getBase64Images(image);
   a.href = base64;
   document.body.appendChild(a);
   a.click();
   document.body.removeChild(a);
};
function getBase64Images(image) {
   const canvas = document.createElement("canvas");
   canvas.width = image.width;
   canvas.height = image.height;
   const context = canvas.getContext("2d");
   context.drawImage(image, 0, 0, image.width, image.height);
   const url = canvas.toDataURL("image/png", 0);
   return url;
}