商城后台管理系统 02, Vue项目-下载图片资源
html2canvas 官网： http://html2canvas.hertzen.com/
首先关于canvas,可以看看官网https://www.canvasapi.cn/HTMLCanvasElement/,
canvasjs图标库的官网：https://canvasjs.com/jquery-charts/
canvas官网
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL HTMLCanvasElement.toDataURL() 方法返回一个包含图片表示的 data URI，此图片的格式由 type 参数指定。 可以指定所需的文件格式和图片质量。如果未指定文件格式，或指定的文件格式不受支持，则数据将以 image/png 导出。换句话说，如果传入的类型非 image/png，但是返回的值以 data:image/png 开头，那么这个类型是不受支持的。 浏览器被要求支持 image/png，许多浏览器也会支持 image/jpeg 和 image/webp 在内的其他格式。 对于支持编码分辨率元数据的文件格式，创建的图像数据将具有 96dpi 的分辨率。Vue项目-下载图片资源 实现代码如下
1, src/views/User/index.js <template> <div class="user"> <div class="hetong"> <!-- 1, 查看合同 --> 签约合同内容:<el-button type="primary" size="small" @click="look">查看合同</el-button> </div> <VuePdf ref="myPdf" /> <!-- 2, 查看发票 --> <div class="money"> <el-row :gutter="20"> <el-col :span="8"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>卡片名称</span> <el-button @click="download" style="float: right; padding: 3px 0;" type=" text">下载发票</el-button> </div> <div class="text item"> <img ref="img" style="width: 400px;" :src="imgUrl" alt="" /> </div> </el-card> </el-col> <el-col :span="8"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>卡片名称</span> <el-button @click="downs" style="float: right; padding: 3px 0;" type=" text">下载不同源发票</el-button> </div> <div class="text item"> <img ref="myimg" style="width: 400px;" src="../../assets/images/88.png" alt="" /> </div> </el-card> </el-col> <el-col :span="8"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>卡片名称</span> <el-button @click="down()" style="float: right; padding: 3px 0;" type=" text">下载本地发票</el-button> </div> <div class="text item"> <img ref="img" style="width: 400px;" :src="imgUrl" alt="" /> </div> </el-card> </el-col> </el-row> </div> </div> </template> <script> import VuePdf from '@/views/User/VuePdf'; import img from '@/assets/images/88.png'; export default { data() { return { imgUrl: img, }; }, components: { VuePdf }, methods: { // 查看合同 look() { this.$refs.myPdf.dialogVisible = true }, download() { // 1, 新窗口打开网址 右键保存 look() open() let url = this.$refs.img; console.log(url.src); window.location.href = url.src; }, // 2, 必须同源才能下载 可以直接下载 down() { var alink = document.createElement("a"); alink.href = this.imgUrl; console.log(this.imgUrl); alink.download = "pic"; // 图片名 alink.click(); }, // 解决图片不同源下载问题 downloadImage(imgsrc, name) { // 下载图片地址和图片名 创建图片 var image = new Image(); // <img /> // 解决跨域 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); // 得到图片的 base64 编码数据 图片格式 默认为 image/png var url = canvas.toDataURL("image/png"); // 生成一个 a 元素 var a = document.createElement("a"); // 创建一个单击事件 var event = new MouseEvent("click"); // 设置图片名称 a.download = name || "photo"; // 将生成的URL设置为a.href属性 a.href = url; // 触发a的单击事件 a.dispatchEvent(event); }; // 给图片赋值 image.src = imgsrc; }, downs() { this.downloadImage(this.$refs.myimg.src, "pic"); }, }, }; </script> <style lang="less" scoped> .user { margin: 10px; } </style>