Is it possible to copy a canvas image to the clipboard?

前端 未结 4 645
难免孤独
难免孤独 2020-12-20 13:17

I\'ve created an image from my canvas object by using canvas.toDataURL(\"image/png\", 0.7). It works fine to save the image from the context menu but it doesn\'

4条回答
  •  谎友^
    谎友^ (楼主)
    2020-12-20 13:40

    Today 4 years later, it's the most starred issue in Google Chrome. To copy images using JavaScript. And now it's possible!

    Chrome 76 Beta supports it: https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html

    You can read the full draft here: https://www.chromestatus.com/feature/5074658793619456

    and here: https://w3c.github.io/clipboard-apis/#async-clipboard-api

    Example:

    var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});
    
      const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
      await navigator.clipboard.write([clipboardItemInput]);
    

    You can test it here: http://w3c-test.org/clipboard-apis/async-write-image-read-image-manual.https.html

    (Now it support only Chrome 76 beta)

    More info: The draft document [contain examples]: https://docs.google.com/document/d/1lpi3-9vBP_1b7hZc2xBs0s_HaACJ6UigZZqHlJSNeJg/edit#heading=h.do75bvtsde7a

提交回复
热议问题