img标签图片下载(js 无需引用插件)

1、HTML 设置图片元素

poster1

2、js下载图片函数

原理:a标签自带属性download

function savePic(e) {
	console.log(e);
    //获得图片元素
	var img = document.getElementById('poster' + e + '_click');
	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/jpg"); //得到图片的base64编码数据
		let a = document.createElement("a"); // 生成一个a元素
		let event = new MouseEvent("click"); // 创建一个单击事件
		a.download = '测试海报页面'; // 设置图片名称
		a.href = url; // 将生成的URL设置为a.href属性
		a.dispatchEvent(event); // 触发a的单击事件
		};
	image.src = img.src;
};

3、注意事项

在微信界面内,长按图片有下载图片服务,该函数适用于浏览器

你可能感兴趣的:(前端基础,javascript)