url 转 图片自动下载

  1. function saveFile(data, filename) {
  2.    let image = new Image();
  3.   // 解决跨域 Canvas 污染问题
  4.   image.setAttribute("crossOrigin", "anonymous");
  5.   image.onload = function() {
  6.     let canvas = document.createElement("canvas");
  7.     canvas.width = image.width;
  8.     canvas.height = image.height;
  9.     let context = canvas.getContext("2d");
  10.     context.drawImage(image, 0, 0, image.width, image.height);
  11.     let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
  12.     let a = document.createElement("a"); // 生成一个a元素
  13.     let event = new MouseEvent("click"); // 创建一个单击事件
  14.     a.download = filename || "photo"; // 设置图片名称
  15.     a.href = url; // 将生成的URL设置为a.href属性
  16.     a.dispatchEvent(event); // 触发a的单击事件
  17.   };
  18.   image.src = data;
  19. }
  1. function saveFile(data, filename) {
  2.  // 创建隐藏的可下载链接
  3.     var eleLink = document.createElement('a');
  4.     eleLink.download = filename;
  5.     eleLink.style.display = 'none';
  6.         // 字符内容转变成blob地址
  7.     var blob = new Blob([data]);
  8.        eleLink.href = URL.createObjectURL(blob);
  9.     // 触发点击
  10.     document.body.appendChild(eleLink);
  11.     eleLink.click();
  12.     // 然后移除
  13.     document.body.removeChild(eleLink);
  14. }
  16. var downFile = (file, name = '下载模板.xls') => {
  17.   const blob = new Blob([file])
  18.   const fileName = name
  19.   if ('download' in document.createElement('a')) { // 非IE下载
  20.     const elink = document.createElement('a')
  21.     elink.download = fileName
  22.     elink.style.display = 'none'
  23.     elink.href = URL.createObjectURL(blob)
  24.     document.body.appendChild(elink)
  25.     elink.click()
  26.     URL.revokeObjectURL(elink.href) // 释放URL 对象
  27.     document.body.removeChild(elink)
  28.   } else { // IE10+下载
  29.     navigator.msSaveBlob(blob, fileName)
  30.   }
  31. }
  1. /**
  2.  * 在本地进行文件保存
  3.  * @param  {String} data     要保存到本地的图片数据
  4.  * @param  {String} filename 文件名
  5.  */
  6. saveFile(data, filename) {
  7.     const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
  8.     save_link.href = data;
  9.     save_link.download = filename;
  11.     const event = document.createEvent('MouseEvents');
  12.     event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  13.     save_link.dispatchEvent(event);
  14. }
  1. function downQrCode() {
  2.   try {
  3.     let canvas = document.getElementById("qrcode");
  4.     let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
  5.     let a = document.createElement("a"); // 生成一个a元素
  6.     let event = new MouseEvent("click"); // 创建一个单击事件
  7.     a.download = name || "qrcode"; // 设置图片名称没有设置则为默认
  8.     a.href = url; // 将生成的URL设置为a.href属性
  9.     a.dispatchEvent(event); // 触发a的单击事件
  10.     window.$message?.success("down success");
  11.   } catch (error) {
  12.     console.log(error);
  13.     window.$message?.error("down error");
  14.   }
  15. }
  1. // 从 canvas 提取图片 image
  2. function convertCanvasToImage(canvas) {
  3.     //新Image对象，可以理解为DOM
  4.     var image = new Image();
  5.     // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
  6.     // 指定格式 PNG
  7.     image.src = canvas.toDataURL("image/png");
  8.     return image;