How to hyperlink download file canvas - consider
HTMLCanvasElement.toBlob()
The method creates a object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. If is not specified, the image type is . The created image is in a resolution of 96dpi.
The third argument is used when creating images using lossy compression (such as ) to specify the quality of the output.
Syntax
.toBlob(, , );Parameters
- A callback function with the resulting object as a single argument.
- Optional
- A indicating the image format. The default type is .
- Optional
- A between and indicating image quality if the requested type is or . If this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/webp respectively. Other arguments are ignored.
Return value
None.
Exceptions
- The canvas's bitmap is not origin clean; at least some of its contents come from secure
Examples
Getting a file representing the canvas
Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new element to the document, whose source image is the one created using the canvas.
var canvas = document.getElementById('canvas'); canvas.toBlob(function(blob) { var newImg = document.createElement('img'), url = URL.createObjectURL(blob); newImg.onload = function() { // no longer need to read the blob so it's revoked URL.revokeObjectURL(url); }; newImg.src = url; document.body.appendChild(newImg); });Note that here we're creating a PNG image; if you add a second parameter to the call, you can specify the image type. For example, to get the image in JPEG format:
canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% qualityA way to convert a canvas to an ico (Mozilla only)
This uses to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.
var canvas = document.getElementById('canvas'); var d = canvas.width; ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(d / 2, 0); ctx.lineTo(d, d); ctx.lineTo(0, d); ctx.closePath(); ctx.fillStyle = 'yellow'; ctx.fill(); function blobCallback(iconName) { return function(b) { var a = document.createElement('a'); a.textContent = 'Download'; document.body.appendChild(a); a.style.display = 'block'; a.download = iconName + '.ico'; a.href = window.URL.createObjectURL(b); } } canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32');Save toBlob to disk with OS.File (chrome/add-on context only)
This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code, as OS APIs are not present on web sites.
Specifications
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
ChromeFull support 50 | EdgeFull support 79
| FirefoxFull support 19 | IEFull support 10
| OperaFull support 37 | SafariFull support 11 | WebView AndroidFull support 50 | Chrome AndroidFull support 50 | Firefox AndroidFull support 4 | Opera AndroidFull support 37 | Safari iOSFull support 11 | Samsung Internet AndroidFull support 5.0 | |
Image quality parameter | ChromeFull support 50 | EdgeFull support 79 | FirefoxFull support 25 | IENo support No | OperaFull support Yes | SafariNo support No | WebView AndroidFull support 50 | Chrome AndroidNo support No | Firefox AndroidFull support 25 | Opera AndroidNo support No | Safari iOSNo support No | Samsung Internet AndroidNo support No |
Legend
- Full support
- Full support
- No support
- No support
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.
0 thoughts to “How to hyperlink download file canvas”