In the recent development, we need to provide download function for img tag and Canvas dynamically drawn image, the following is the result of our exploration.

I. Canvas version

Function downloadCanvasIamge(Selector, Var canvas = document.querySelector(selector) var canvas = document.querySelector(selector Var a = document.createElement('a') // Create a click event var event = new MouseEvent('click') // Set a's Download property to the name of the image we want to download, If the name does not exist, it use the 'download image as the default name a. d. ownload = name | |' download pictures name / / sets the URL generated to a.h ref attribute a.h ref = URL / / triggers the click event of a // downloadCanvasIamge(' Canvas ', 'image name ')Copy the code

Img tag version

Function downloadIamge(selector, Var img = document.querySelector(selector) var img = document.querySelector(selector) var img = img.src var a = Document. The createElement method (' a ') var event = new MouseEvent (' click ') a. d. ownload = name | | 'download pictures name a.h ref = url // downloadIamge('canvas', 'image name ')Copy the code

Improved version

Since cross-domain will cause a TAB to open a new TAB directly in some browsers, the improvements are as follows

Function downloadIamge(selector, name) {var image = new image (); 'anonymous') image.onload = function () { var canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height var context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, Image.height) var url = canvas.todataURL ('image/ PNG ') // Generate an ELEMENT var a = document.createElement('a') // Create a click event var Event = new MouseEvent('click') // Set a's Download property to the name of the image we want to download, If the name does not exist, it use the 'download image as the default name a. d. ownload = name | |' download pictures name / / sets the URL generated to a.h ref attribute a.h ref = URL / / triggers the click event of a A.dispatchevent (event)} image.src = document.querySelector(selector).src} Image name, optional downloadIamge('canvas', 'image name ')Copy the code

Third, summary

We mainly use the download attribute of a tag. The following description is given for MDN:

This property instructs the browser to download the URL rather than navigate to it, thus prompting the user to save it as a local file. If the property has a value, it is used as a pre-filled file name in the save prompt (the user can still change the file name as needed). There is no limit to the allowed values, but/and \ are converted to underscores. Most file systems restrict some punctuation in file names, and browsers adjust the suggested names accordingly.

Points to note:

  • This property only applies to cognate URLs.

  • You can use blob: URLs and Data: URLs to make it easy for users to download content generated in JavaScript (such as photos created by Web applications that use online drawing).

  • The HTTP header takes precedence over content-Disposition: if the HTTP header’s Content-disposition: exists and is given a filename different from the attribute.

  • If the attribute has content-disposition set to inline, Firefox takes precedence over Content-disposition, as in the case of file names, while Chrome takes precedence over the Download attribute.

Supported: Google,IE9 or above.