失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > js vue将后台返回的url图片地址以图片形式保存到本地

js vue将后台返回的url图片地址以图片形式保存到本地

时间:2019-01-07 16:45:45

相关推荐

js vue将后台返回的url图片地址以图片形式保存到本地

直接将下面函数复制到 项目中,传入要保存的 url, 以及要设置的文件名字,即可。

// 现在 html中 定义一个容器,如 <div id="qrcode"></div>downloadByAxios(url, name) {// 图片地址 ,文件名document.getElementById('qrcode').innerHTML = ''; // 先给这个dom元素清空内容,防止污染canvas// 下载图片地址和图片名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'); // 得到图片的base64编码数据const a = document.createElement('a'); // 生成一个a元素const event = new MouseEvent('click'); // 创建一个单击事件a.download = name || 'photo'; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = url;},

如果觉得《js vue将后台返回的url图片地址以图片形式保存到本地》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。