记一次截图并下载的功能

情景:监控画面,点击按钮截取当前画面,并下载到本地;

初次尝试琢磨着之前导出表格使用过window.open,就试了一下:

window.open(url);

后来发现它只会打开图片,并不会下载,然后开始在网上找方法,找到了很多,都大同小异(通过创建a标签,再创建点击事件)

试了很多,但是都有一个问题,使用后点击那个按钮会产生跨域,实在没办法了就跟后端同事一商量先发布到开发环境上面试试还会不会跨域;

结果就是,本地报跨域,但是放到开发环境就正常了;

以下是我使用的方法:

在接口请求成功后如果后端给的是完整地址,调用该方法时传进去就行了,然后再设个图片名,

如果后端给的只有文件名就问一下后端图片的路径是什么,然后自己手动拼一下传进去.

注:地址是要带文件名的(就接口返回给你的那个),name自己设一个就行

// 图片下载方法
		 downloadIamge(imgsrc, name) {//下载图片地址和图片名
			// console.log(imgsrc)
			    var image = new Image();
			    // 解决跨域 Canvas 污染问题
			    image.setAttribute("crossOrigin", "anonymous");
			    image.onload = function () {
			        var canvas = document.createElement("canvas");
			        canvas.width = image.width;
			        canvas.height = image.height;
			        var context = canvas.getContext("2d");
			        context.drawImage(image, 0, 0, image.width, image.height);
			        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
			
			        var a = document.createElement("a"); // 生成一个a元素
			        var event = new MouseEvent("click"); // 创建一个单击事件
			        a.download = name || "photo"; // 设置图片名称
			        a.href = url; // 将生成的URL设置为a.href属性
			        a.dispatchEvent(event); // 触发a的单击事件
			    };
			    image.src = imgsrc;
			},

还有还有,我找的时候好多方法,这个只是我用的,完了,祝你好运!!!!!