search

tomayac / SVGcode

Convert color bitmap images to color SVG vector images.
https://svgco.de
GNU General Public License v2.0
779 stars 117 forks source link

Provide text-only copy option #51

Closed cibolog closed 2 years ago

cibolog commented 2 years ago

Ubuntu 20.04,

On "Copy SVG" click with default image (or any image):

tomayac commented 2 years ago

Thanks for the report.

I have fixed the Firefox issue (Firefox doesn't support module workers so I needed to load a polyfill and only supports the text part but not the binary part of the clipboard API).

The Chrome issue is due to this outdated version (released a year ago) not yet supporting copying SVGs. Please update your Chrome version.

cibolog commented 2 years ago

No hope to make it work on older chrome just as text?

tomayac commented 2 years ago

Oh, so you’re stuck on 88? Curious to hear the background. But yes, text-only should work as a fallback in this case. Let me reopen this issue.

tomayac commented 2 years ago

@cibolog Not particularly proud of this code, but it gets the job done: https://github.com/tomayac/SVGcode/blob/543a6e6fb2ab83a29ab6c653cae4ac9a04fa8288/src/js/clipboard.js#L96. Chrome 88 always crashes the tab hard when you attempt to copy image/svg+xml, so user agent sniffing is the only workable solution.

ShangChien commented 2 years ago

@tomayac Hello! I am new to web-dev, and learn to use Async Clipboard API in copy web item to Microsoft-Offices. I read your blog multi-mime-type-copying-with-the-async-clipboard-api, so cool work ! But it still paste a png or text in Microsoft-Offices. My goal is to write native svg file in clipboarditems ,then paste native svg in MS-word by command ctrl+v. During the process of realizing my goal, two doubts： my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins)

I can new a *.svg suffix file and paste svg text in it , then drag or copy svg file from Windows10 to Office-Word2019, which work well. lacking desktop programming experience，I know this approach is much related to Office rather than web-chrome.

Is there any suggestion for a elegent way to copy svg item cross platform( Web to Office)?

thank you !

ShangChien commented 2 years ago

I just read a chrome official release feature blog about your team work on Async Clipboard: Web custom formats for the Async Clipboard API Congratulations！ But ,the demo do not work in my chrome : my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins) image

tomayac commented 2 years ago

But ,the demo do not work in my chrome : my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins)

This is a problem that's fixed in Chrome 105, the current Canary version. Please try it there.

tomayac commented 2 years ago

@tomayac Hello! I am new to web-dev, and learn to use Async Clipboard API in copy web item to Microsoft-Offices. I read your blog multi-mime-type-copying-with-the-async-clipboard-api, so cool work !

Thank you ☺️!

But it still paste a png or text in Microsoft-Offices. My goal is to write native svg file in clipboarditems ,then paste native svg in MS-word by command ctrl+v. During the process of realizing my goal, two doubts： my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins)

  • I need to manual enable chrome flag : Experimental Web Platform features to clear bellow crash snapshot: Is this meaning it not suitable to use this feature(could change or even delete) in base project?

Correct, copying SVGs is still behind a flag.

  • By enable Experimental Web Platform features flag, i can write svg text in clipboard with type of image/svg+xml. But with command ctrl+v in Office-Word, it behaves as shown below, which is not satisfactory.

The problem here is that Office looks at the clipboard and inspects the formats, and it finds three representations. You may prefer SVG, but Office prefers some other representation. The solution probably is to only copy SVG, and not the other representations.

I can new a *.svg suffix file and paste svg text in it , then drag or copy svg file from Windows10 to Office-Word2019, which work well. lacking desktop programming experience，I know this approach is much related to Office rather than web-chrome.

In this case Office has no choice, so it deals with the SVG in the drag & drop operation, which it clearly is capable of. If you put just one representation, the SVG one, in the clipboard, it should work with pasting, too.

ShangChien commented 2 years ago

@tomayac Thanks for you sparing time to guide me！ I found the behavior of copy varies between Web-Chrome and Windows10_OS:

But, in case2, the encoded format is different and more complex. ( I just test copy event between Chrome and Office_Word): If we properly insert a svg, then copy it in Word, last paste it in Chrome. Chrome can read two type( image/svg+xml: ... ; image/png: ... ). The data of image/png is valid, the data of image/svg+xml is invalid. With debug code fileReader.readAsText(item.getType('image/svg+xml')), it will return a garbled string.

It may be that the Office follows its own internal blob file svg format specification, which make idea of directly copy svg between Office and Web unrealistic. So Sad....

tomayac commented 2 years ago

For case 1, files are exposed via the paste event, as outlined in https://web.dev/async-clipboard/#working-with-pasted-files.

For case 2, this may well be Office-specific behavior. Maybe worth finding someone from the Office team to talk to about that.

yisibl commented 8 months ago

Office uses the com.microsoft.image-svg-xml type, which is incompatible with Web standards, making it impossible to interoperate with browsers and other programs.

https://github.com/tomayac/SVGcode/assets/2784308/1df972cd-79ec-4210-839e-42ea1ab87b38

tomayac commented 8 months ago

Is there anything actionable for SVGcode to do left?

yisibl commented 8 months ago

For SVGcode, I'd suggest adding the image/svg+xml type to the clipboard, so that once Chrome ships, we can paste SVG from the browser into any App that supports it, like Keynote.

For Office, I'm afraid it will take their team to improve it. @snianu Can you help me get in touch with the Office people?

tomayac commented 8 months ago

Can you try again now? (Make sure the service worker had time to reload the new app version, please.) It seems like I can't influence the order, but you're well aware via https://github.com/w3c/clipboard-apis/issues/137.

Screenshot 2024-02-23 at 13 50 30

yisibl commented 8 months ago

Can you try again now? (Make sure the service worker had time to reload the new app version, please.) It seems like I can't influence the order, but you're well aware via w3c/clipboard-apis#137.

Yes, the main obstacle is the order.