“默默地”将 canvas 保存到 javascript 的图像中

Question

I have a canvas on which I draw pretty images!

Using.toDataURL('image/gif'), I save those images as image files. So far so good.

Thing is that I want to save a number of those images (I change parameters for each image to be saved.)

I would like to do it "silently", that is without having to click on "Save" on the modal window that pops up every time.

Is there a way to do that?

Thanks.

Answer 1

Using the download attribute of an <a> element, you can silently download the image data without needing to deal with any dialog windows. I should warn that this could be potentially dangerous as it is literally downloading a file to your computer without any direct confirmation .

Once you have your data URL from your canvas, the rest is pretty easy. You can create a new <a> element, set the href to your data URL , set the download attribute to the filename you wish to use, and then execute the click() event on this newly created element.

 let dataURL const _Base64Image = url => { const img = new Image() img.setAttribute('crossOrigin', 'anonymous') img.onload = () => { const canvas = document.createElement("canvas") canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext("2d") ctx.drawImage(img, 0, 0) dataURL = canvas.toDataURL("image/png") _SetBG(document.querySelector("#imgTest"), dataURL, img.width, img.height) } img.src = url } const _SetBG = (el, data, w, h) => { el.style.width = `${w}px` el.style.height = `${h}px` el.style.backgroundImage = `url("${data}")` } const _SaveImage = (data, filename) => { const a = document.createElement("a") a.href = data a.download = filename a.click() } _Base64Image('https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png') document.querySelector("input[type='button']").addEventListener("click", e => { _SaveImage(dataURL, "test_image.png") })

 .random-background { max-height: 100px; max-width: 100px; background-size: contain; }

 <div id="imgTest" class="random-background"></div> <br> <br> <input type="button" value="Save Image">

NOTE

This snippet will not work on StackOverflow as part of their security settings. However I also uploaded this to CodePen so you can see a working version.

For the sake of not forcing downloads on anyone I included a button that must be clicked to save the image. However this is not required for the code to work. Simply calling the _SaveImage() function ( and passing in the data URL and filename ) will work. But having the snippet do this automatically is somewhat problematic as you can get hit with multiple downloads for the same file just by going to the page.