在vue中设置图片下载到本地

一、技术介绍

        1、Image对象是JS中的内置对象，它代表嵌入的图像。使用new Image()来创建一个image对象，利用onload事件解决图片加载慢的问题。crossOrigin是image对象的一个属性值，指定CORS的访问设置，anonymous表示匿名访问，可以用来解决跨域问题。

        2.MDN：<canvas>是一个可以使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素。它本身就是一个画布，可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。

        2.1创建画布

// 创建一个canvas对象，用来绘制图片
var canvas = document.createElement("canvas");
// 指定画布的大小
canvas.width = image.width;
canvas.height = image.height;

        2.2 决定二维还是三维图像

// 通过getContext（）方法来或得渲染上下文和绘画功能
var context = canvas.getContext("2d");  // 这里聚焦于2D图形

        2.3使用drawImage方法绘制

一、语法

context.toDataURL(type, encoderOptions);
二、参数

1、type：图片格式，默认为 image/png,可以是其他image/jpeg等

2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。

三、返回值

返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性。

四、书写标准

var url = canvas.toDataURL("image/png");

 二、完整代码

            downloadIamge(imgsrc, name) {
              var image = new Image();
              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");

                var a = document.createElement("a"); 
                var event = new MouseEvent("click"); 
                a.download = name || "photo"; 
                a.href = url; 
                a.dispatchEvent(event);
              };
              image.src = imgsrc;  // 指定图片的来源，这是需要我们提供的
            },
            // 使用时，只需要修改downs函数
            // imageUrl是图片的地址
            downs(imageUrl) {
               // 默认以时间来命名图片，防止重名
              let name = new Date().getTime();
              this.downloadIamge(imageUrl, `${name}`);
            }