vue实现图片下载,vue实现图片预览

　　最近在做一个前端vue.js对接功能模块的时候，需要实现下载图片的功能。本文介绍vue.js根据图片的网址下载图片。有兴趣的可以去了解一下。

　　最近在做一个前端vue.js对接功能模块的时候，需要实现下载图片的功能。后台回了一堆图片网址。我尝试了很多方法，发现点击下载的效果是跳转到一个新的图片网页。后来，经过一番考虑，我终于解决了这个问题：

　　这是后台返回的json数据(IP地址编码，防止重要信息泄露):

　　我在html中的引用是这样的：

　　@click=downCom

　　下载许可证

　　i class=icon-down/i

　　/a

　　vue.js中下载图片的方法方法：

　　downCom() {

　　让那个=这个；

　　这个。$http.files()。然后(res={

　　设hre local=“”；

　　hre local=RES . data . data . URL；

　　this . downloadbylob(hre local， pic )

　　});

　　},

　　可以直接使用下面的方法。只要把你的图片url传递给这个方法，就可以实现vue.js下载图片了。

　　downloadbylob(URL，名称){

　　让image=新图像()

　　image . set attribute( cross origin ， anonymous )

　　image.src=url

　　image.onload=()={

　　let canvas=document . createelement( canvas )

　　画布宽度=图像宽度

　　canvas.height=image.height

　　let ctx=canvas.getContext(2d )

　　ctx.drawImage(image，0，0，image.width，image.height)

　　canvas.toBlob((blob)={

　　let URL=URL . createobjecturl(blob)

　　下载(url，名称)

　　//使用up来释放URL对象

　　URL.revokeObjectURL(url)

　　})

　　}

　　},

　　调用的下载(url，name)方法：

　　函数下载(href，name) {

　　let eleLink=document . createelement( a )

　　eleLink.download=name

　　eleLink.href=href

　　eleLink.click()

　　eleLink.remove()

　　}

　　完成以上代码后，就可以下载图片而不是浏览了。

　　最后点击成功就可以下载图片了。效果图如下：

　　关于vue.js根据图片网址下载图片的这篇文章到此为止。更多关于vue.js下载图片的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。