Shulou(Shulou.com)05/31 Report--

This article mainly introduces the "vue.js how to download pictures according to the picture url" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "vue.js how to download pictures according to the picture url" article can help you solve the problem.

This is the json data returned from the backend (the IP address is coded to prevent the disclosure of important information):

My quote in html goes like this:

Download license

Download the image in the vue.js method:

DownCom () {let that = this; this.$http.files () .then (res = > {let hreLocal= ""; hreLocal= res.data.data.url; this.downloadByBlob (hreLocal, "pic")});}

The following method, you can directly take to use, directly send your picture url to this method, you can achieve vue.js to download pictures.

DownloadByBlob (url,name) {let image = new Image () image.setAttribute ('crossOrigin',' anonymous') image.src = url image.onload = () = > {let canvas = document.createElement ('canvas') canvas.width = image.width 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) download (url,name) / / release URL object URL.revokeObjectURL (url)})}}

The download (url,name) method called:

Function download (href, name) {let eleLink = document.createElement ('a') eleLink.download = name eleLink.href = href eleLink.click () eleLink.remove ()}

After completing the above code, you can download the picture instead of browsing it.

Finally, you can download the image with a single click. The effect image is as follows:

This is the end of the content about "how vue.js downloads pictures according to the picture url". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.