前端使用JavaScript保存图片

在最近的开发当中，需要将一个生成的二维码保存在本地，然后网上找了一些资料，记录一下~

1.在你需要保存的img元素上绑定一个类名

 <vue-qr class="QRImg"  :size="260"  :text="QRCodeUrl"  :logoSrc="QrlogoSrc" colorLight="#fff" colorDark="#000" :margin="0"></vue-qr>

2.使用img保存

    // 下载二维码downloadIamge(el, name) {// 通过选择器获取img元素const img = document.querySelector(el);// // 将图片的src属性作为URL地址const url = img.src;const a = document.createElement("a");const event = new MouseEvent("click");a.download = name || "下载二维码";a.href = url;a.dispatchEvent(event);},

3.使用Canvas 保存

  // 通过选择器获取canvas元素const canvas = document.querySelector(selector);// 使用toDataURL方法将图像转换被base64编码的URL字符串const url = canvas.toDataURL("image/png");// 生成一个a元素const a = document.createElement("a");// 创建一个单击事件const event = new MouseEvent("click");// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称a.download = name || "下载图片名称";// 将生成的URL设置为a.href属性a.href = url;// 触发a的单击事件a.dispatchEvent(event);

4.解决跨域下载的问题

    downloadIamge(selector, name) {const image = new Image();// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous");image.onload = function() {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);const url = canvas.toDataURL("image/png");// 生成一个a元素const a = document.createElement("a");// 创建一个单击事件const event = new MouseEvent("click");// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称a.download = name || "下载图片名称";// 将生成的URL设置为a.href属性a.href = url;// 触发a的单击事件a.dispatchEvent(event);};image.src = document.querySelector(selector).src;},

5.总结 a标签的download属性

a标签加上downlaod属性后，就可完成对href属性链接文件的下载，但仅仅是限于同源文件，如果是非同源，download属性会失效。
无download属性的时候，a标签的默认行为是链接跳转进行预览，而针对浏览无法预览的文件，也可达到下载的效果。
记录一下工作日常，写得不太好，请各位看官见谅。

前端使用JavaScript保存图片相关推荐

关于前端使用JavaScript无法实现canvas打印问题的解决
关于前端使用JavaScript无法实现canvas打印问题的解决参考文章: (1)关于前端使用JavaScript无法实现canvas打印问题的解决 (2)https://www.cnblogs. ...
好程序员web前端分享javascript枚举算法
好程序员web前端分享javascript枚举算法,题目:在1,2,3,4,5 五个数中,我们随机选取 3个数.问有多少种取法?并且把每种取出数的方法列举出来. 乍看这道题,其实感觉没什么难度.三个f ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
互联网公司前端初级Javascript面试题
互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点) JavaScript是一种基于对象(Object)和事件 ...
javascript乘法和加法_Web前端：JavaScript中的NaN是什么？
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:JavaScript中的NaN是什么?",有兴趣做前端的朋友,一起来看看吧! JavaScript中的数字类型包含整数和 ...
mfc获取子窗口句柄_前端设计-JavaScript中父窗口与子窗口间的通信
父窗体与子窗体之间的通信在之前文章讲解windows程序设计过程中,我们曾描述了windows程序窗口之间通信与控制实现方法与过程,如窗体之间参数传递等.本文主要从Web程序开发前端JavaScri ...
web前端分享JavaScript到底是什么？特点有哪些？
web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...

前端使用JavaScript保存图片

1.在你需要保存的img元素上绑定一个类名

2.使用img保存

3.使用Canvas 保存

4.解决跨域下载的问题

5.总结 a标签的download属性

前端使用JavaScript保存图片相关推荐

最新文章

热门文章