Fix download length overflow issue (#300)

* Fix download length overflow issue

* Fix up API

* Clean up
main
Michael Fix 7 years ago committed by GitHub
parent 9a4454fa3e
commit 083a0e8441
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -105,7 +105,7 @@ class Editor extends React.Component {
saveState(localStorage, s) saveState(localStorage, s)
} }
getCarbonImage({ format } = { format: 'png' }) { getCarbonImage({ format, type } = { format: 'png' }) {
//if safari, get image from api //if safari, get image from api
if ( if (
navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Safari') != -1 &&
@ -119,6 +119,11 @@ class Editor extends React.Component {
const node = document.getElementById('export-container') const node = document.getElementById('export-container')
const exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value const exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value
const width = node.offsetWidth * exportSize
const height = this.state.squaredImage
? node.offsetWidth * exportSize
: node.offsetHeight * exportSize
const config = { const config = {
style: { style: {
transform: `scale(${exportSize})`, transform: `scale(${exportSize})`,
@ -126,15 +131,19 @@ class Editor extends React.Component {
background: this.state.squaredImage ? this.state.backgroundColor : 'none' background: this.state.squaredImage ? this.state.backgroundColor : 'none'
}, },
filter: n => (n.className ? String(n.className).indexOf('eliminateOnRender') < 0 : true), filter: n => (n.className ? String(n.className).indexOf('eliminateOnRender') < 0 : true),
width: node.offsetWidth * exportSize, width,
height: this.state.squaredImage height
? node.offsetWidth * exportSize
: node.offsetHeight * exportSize
} }
return format.toLowerCase() === 'svg' if (type === 'blob')
? domtoimage.toSvg(node, config) return domtoimage
: domtoimage.toPng(node, config) .toBlob(node, config)
.then(blob => window.URL.createObjectURL(blob, { type: 'image/png' }))
if (format === 'svg')
return domtoimage.toSvg(node, config).then(dataUrl => dataUrl.split('&nbsp;').join('&#160;'))
return domtoimage.toPng(node, config)
} }
updateSetting(key, value) { updateSetting(key, value) {
@ -142,14 +151,13 @@ class Editor extends React.Component {
} }
save({ id: format = 'png' }) { save({ id: format = 'png' }) {
this.getCarbonImage({ format }).then(dataUrl => {
if (format === 'svg') {
dataUrl = dataUrl.split('&nbsp;').join('&#160;')
}
const link = document.createElement('a') const link = document.createElement('a')
const type = format === 'png' ? 'blob' : undefined
return this.getCarbonImage({ format, type }).then(url => {
link.download = `carbon.${format}` link.download = `carbon.${format}`
link.href = dataUrl link.href = url
document.body.appendChild(link) document.body.appendChild(link)
link.click() link.click()
link.remove() link.remove()

Loading…
Cancel
Save