<template> <el-card class="box-card"> <div> <h2 style="margin: 20px;">vue中,图片下载到本地,图片保存到本地</h2> <el-button type="primary" @click="downs()">下载图片</el-button> </div> </el-card> </template> <script> export default { data() { return { imgUrl: '' }; }, methods: { // 1.解决图片不同源下载问题(访问的网站域名与服务器域名不一致) // imgsrc:代表图片地址, name:代表图片名称 downloadIamge(imgsrc, name) { //下载图片地址和图片名 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; }, downs() { this.imgUrl = 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg'; this.downloadIamge(this.imgUrl, '这是一张图片'); }, // 2.必须同源(访问的网站域名与服务器域名一致)才能下载 // downs() { // this.imgUrl = 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg'; // var alink = document.createElement("a"); // alink.href = this.imgUrl; // alink.download = "这是一张图片"; //图片名 // alink.click(); // } } } </script> <style> </style>
vue中,图片下载到本地,图片保存到本地
最新推荐文章于 2024-07-09 15:15:21 发布