Skip to content

Commit

Permalink
Copy png to clipboard:
Browse files Browse the repository at this point in the history
test for safari copy by button
  • Loading branch information
hanzhenfeng authored and MrCoder committed Oct 27, 2022
1 parent 5a4d86c commit 26ebc46
Showing 1 changed file with 9 additions and 55 deletions.
64 changes: 9 additions & 55 deletions src/components/ContentWrap.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -469,38 +469,6 @@ export default class ContentWrap extends Component {
trackEvent('ui', 'copyPng');
}

async copyPngClickHandlerBySafari1(e) {
console.log(e);
navigator.clipboard.write([
new ClipboardItem({
"image/png": new Promise(async resolve => {
const response = await fetch("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png");
resolve(await response.blob());
})
})
]).then(
r => console.log("success", r),
reason => console.log("failed", reason)
);
}

async copyPngClickHandlerBySafari2(e) {
console.log(e);
const mountingPoint = this.frame.contentWindow.document.getElementById('diagram');
// eslint-disable-next-line
const png = await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toBlob();
navigator.clipboard.write([
new ClipboardItem({
"image/png": new Promise(async resolve => {
resolve(png);
})
})
]).then(
r => console.log("success", r),
reason => console.log("failed", reason)
);
}

async copyPngClickHandlerBySafari3(e) {
console.log(e);
const mountingPoint = this.frame.contentWindow.document.getElementById('diagram');
Expand All @@ -516,23 +484,7 @@ export default class ContentWrap extends Component {
r => console.log("success", r),
reason => console.log("failed", reason)
);
}

async copyPngClickHandlerBySafari4(e) {
console.log(e);
const mountingPoint = this.frame.contentWindow.document.getElementById('diagram');
// eslint-disable-next-line
navigator.clipboard.write([
new ClipboardItem({
"image/png": new Promise(async resolve => {
const png = await mountingPoint.getElementsByClassName('frame')[0].parentElement.__vue__.toBlob();
resolve(await png);
})
})
]).then(
r => console.log("success", r),
reason => console.log("failed", reason)
);
trackEvent('ui', 'copyPng');
}

copyPngToClipboard(imageData) {
Expand Down Expand Up @@ -1142,16 +1094,18 @@ export default class ContentWrap extends Component {
</Button>
<Button
className="btn--dark button icon-button hint--rounded hint--bottom-left"
aria-label="Copy PNG on Clipboard"
aria-label="Copy PNG to Clipboard"
onClick={this.copyPngClickHandler.bind(this)}>
<span class="material-symbols-outlined">file_copy</span>
<span>Copy PNG File By Chrome</span>
</Button>
<Button
className="btn--dark button icon-button hint--rounded hint--bottom-left"
aria-label="Copy PNG to Clipboard"
onClick={this.copyPngClickHandlerBySafari3.bind(this)}>
<span class="material-symbols-outlined">file_copy</span>
<span>Copy PNG File</span>
</Button>
<a onClick={this.copyPngClickHandlerBySafari1.bind(this)}>test1</a>
<a onClick={this.copyPngClickHandlerBySafari2.bind(this)}>test2</a>
<a onClick={this.copyPngClickHandlerBySafari3.bind(this)}>test3</a>
<a onClick={this.copyPngClickHandlerBySafari4.bind(this)}>test4</a>
<a id="a-test">just-a</a>
</div>
</div>
)}
Expand Down

0 comments on commit 26ebc46

Please sign in to comment.