当前位置:网站首页>JS download pictures

JS download pictures

2022-06-26 06:33:00 YogaMiller

fucntion downloadIamge(imgsrc, name) {
    
	let image = new Image();
	//  To solve the cross domain  Canvas  pollution problem 
	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"); // photographic base64 Encoding data 
		let a = document.createElement("a"); //  Generate a a Elements 
		let event = new MouseEvent("click"); //  Create a click event 
		a.download = name || "photo"; //  Set picture name 
		a.href = url; //  The generated URL Set to a.href attribute 
		a.dispatchEvent(event); //  Trigger a Click event for 
	};
	image.src = imgsrc;
}

//  Poor compatibility ,QQ Browsers don't work , 64 No version of Google 
function downloadImg(src, name){
    
    let canvas = document.createElement('canvas'),
        img = document.createElement('img');

    img.src = src;
    img.setAttribute("crossOrigin",'Anonymous')

    img.onload = function(e) {
    
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext('2d');

        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
        canvas.toBlob( (blob) => {
    
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = ' file name '; 
            link.click();
        }, "image/jpg");
    }
}
1. data:  agreement  base64?
2. blob:  agreement ?
原网站

版权声明
本文为[YogaMiller]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/177/202206260619157456.html