Src需要注意的是，根据源情况，图片存在跨域情况，需要后台开放权限，如果是前端本地图像，则可以动态获取地址。

！DOCTYPE html

Html

头(电影)

meta charset=' utf-8 '

标题/标题

/head

菩提

下载A onclick='downCom()'图片/a

im gref=' imgaa ' id=' imgaa ' src=' https://gimg 2 . Baidu . com/image _ search/src=http:1-22

！-vue动态绑定img的src属性绝对路径下的fatherList.imgSrc联系人./././image/tupian.png-

！-img:src=' require(' ' father list . img src)' alt=' ' ref=' image '/-

/body

Script type='text/javascript '

Function downCom() {

//src需要注意的是，根据源的不同，图片存在跨域情况，需要后台开放权限。对于前端本地照片，可以动态获取以下地址：

//vue下的let data=this。$ refs.imgaaLet src=data.src

//vue和js下的document.query selector ('# imgaa ')。src

let src=' https://gimg 2 . Baidu . com/image _ search/src=http://www . duanlonglong . com/us Sec=1645311

Let name=“段龙博客照片1”；

//src是图片地址，name是下载的图片的名称

This.downloadByBlob(src、name)；

德布格

}

Function downloadbyblob (URL、name) {

Let image=new Image()

image . set attribute(' cross origin '，' anonymous ')

Image.src=URL

Image.onload=()={

letcanvas=document . create element(' canvas ')

Canvas.width=image.width

Canvas.height=image.height

Let CTX=canvas.getContext('2d ')

Ctx.drawimage (image、0、0、image.width和image.height)

canvas . tob lob((blob)={

let URL=URL . createobject URL(blob)

Download(url、name)

//用完URL对象

URL.revokeObjectURL(url)

})

}

}

Function download(href，name) {

letele link=document . create element(' a ')

EleLink.download=name

EleLink.href=href

EleLink.click()

EleLink.remove()

}

/脚本

/html