luanedcosta / copy-image-clipboard Goto Github PK

View Code? Open in Web Editor NEW

58.0 58.0 12.0 3.92 MB

Lightweight library to copy PNG and JPG images to clipboard

Home Page: https://luanedcosta.github.io/copy-image-clipboard/

License: MIT License

JavaScript 7.98% TypeScript 69.88% Shell 0.37% HTML 21.77%

clipboard copy-image copy-to-clipboard image javascript

copy-image-clipboard's Introduction

👋 Hello World

I'm a front-end developer and I'm currently working with JavaScript/TypeScript, React, React Native and Node.js.

📧 Contact

❤️ Things I Like To Do

📱 💻 Create mobile apps and websites.
⭐ Create open source projects to solve problems.
🧠 Learn technologies and tools.
🙋 Help people.

🚀 Published Projects

📈 Statistics

copy-image-clipboard's People

Contributors

Stargazers

Watchers

Forkers

reach1soft innovationdigitalbr ferassaqqa hellorakeshjat kiveai ironman67x keith284487 thaputhsopheak168 mhunesi rongzhang geerghon royalsspirit

copy-image-clipboard's Issues

Uncaught SyntaxError: Unexpected token 'export'

Does not work in Firefox

The example https://luanedcosta.github.io/copy-image-clipboard/ does not work in Firefox, we obtain the message

ClipboardItem is not defined

Browsers (please complete the following information)

Browser name: Firefox (Windows)
Version: 103.0.2 (64-bit)

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

Options argument for the image copy

Is your feature request related to a problem? Please describe.
[For SVGs only]
I suggest providing an optional payload to the copyImageToClipboard and copyBlobToClipboard to overcome size-related issues and make it independent from the in-DOM size of images.
Reference image:

Specifically, optional attributes to be used in place of the provided image's.

/**
 * Gets a blob from an image element.
 *
 * @param {HTMLImageElement} imageElement An image element
 * @returns {Promise<Blob>} A Promise that resolves to a image blob. Rejects the promise if cannot get a blob from the image element.
 */
function getBlobFromImageElement(imageElement) {
    return __awaiter(this, void 0, void 0, function* () {
        return new Promise(function (resolve, reject) {
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            if (context) {
                const { width, height } = imageElement;
                canvas.width = width;
                canvas.height = height;
                context.drawImage(imageElement, 0, 0, width, height);
                canvas.toBlob(function (blob) {
                    if (blob)
                        resolve(blob);
                    else
                        reject('Cannot get blob from image element');
                }, 'image/png', 1);
            }
        });
    });
}

Describe the solution you'd like

Instead, we can pass an optional parameter into the function as a payload and match the width and height attribute from it. Example:

function getBlobFromImageElement(imageElement, payload) {
    ...
    let width, height;
    if(payload){
       width  = payload.width;
       height = payload.height;
    } else {
        width  = imageElement.width;
        height = imageElement.height;
    }
    canvas.width = width;
    canvas.height = height;
    ...
}

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Apply this only for SVGs.
Preserve image quality even for PNG and JPG.

Demo page not working on latest Mozilla Firefox

Describe the bug

Code not working on latest Firefox, but works well on Google Chrome/Chromium
The demo url for testing also doesn't work (https://luanedcosta.github.io/copy-image-clipboard/)
I haven't test on older version of Mozilla Firefox

Browsers (please complete the following information)

Browser name: Mozilla Firefox
Version: 107.0.1

Expected behavior

The demo page as well as the code should work properly

Screenshots

Import error for SvelteKit

Describe the bug

Importing this package in SvelteKit leads to warnings in development and to errors in production builds related to ES modules.

I've set up a demo where I've made the following changes from a new SvelteKit project:

npm install copy-image-clipboard
In src/routes/+page.svelte I've added basic code to check for image copy support:

import { canCopyImagesToClipboard } from 'copy-image-clipboard';

onMount(() => {
	const canCopy = canCopyImagesToClipboard();

	console.log('Can Copy Images To Clipboard:', canCopy);
});

When running in development mode with vite dev I get the following warning: copy-image-clipboard doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix. Forced re-optimization of dependencies

When creating a production build with vite build I get the following error:

(node:13) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/projects/sveltejs-kit-template-default-8qhsvf/node_modules/copy-image-clipboard/dist/index.js:175
export { canCopyImagesToClipboard, convertBlobToPng, copyBlobToClipboard, copyImageToClipboard, createImageElement, getBlobFromImageElement, getBlobFromImageSource, isJpegBlob, isPngBlob, requestClipboardWritePermission };
^^^^^^

SyntaxError: export declarations may only appear at top level of a module
    at compileFunction (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:341450)
    at wrapSafe (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:218347)
    at Module.prototype._compile (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:218723)
    at Module._extensions[".js"] (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:219743)
    at Module.prototype.load (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:217769)
    at Module._load (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:215340)
    at <anonymous> (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:983454)
    at _evaluate (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:15:300439)
    at _evaluate (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:15:300563)
    at <anonymous> (<anonymous>)
Error: 500 /
    at normalise_error_handler/<@file://file:///home/projects/sveltejs-kit-template-default-8qhsvf/node_modules/ (sveltejs/kit/src/core/postbuild/prerender.js:68:12)
    at save@file://file:///home/projects/sveltejs-kit-template-default-8qhsvf/node_modules/ (sveltejs/kit/src/core/postbuild/prerender.js:370:21)
    at visit@file://file:///home/projects/sveltejs-kit-template-default-8qhsvf/node_modules/ (sveltejs/kit/src/core/postbuild/prerender.js:219:7)
    at <anonymous> (<anonymous>)
[vite-plugin-sveltekit-compile] Failed with code 1
error during build:
Error: Failed with code 1
    at fn/</<@file://file:///home/projects/sveltejs-kit-template-default-8qhsvf/node_modules/ (sveltejs/kit/src/utils/fork.js:83:13)
    at EventEmitter.prototype.emit (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:155574)
    at ChildProcess/this._handle.onexit (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:6:956239)
    at _onChildExit/< (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:15:393246)
    at _0x5d97a4 (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:15:150541)
    at _0x2fb6cc/< (https://sveltejskittemplatedefault8qhs-lxfs.w-corp.staticblitz.com/blitz.927bd077ab89da68c6338c4363cc22e79cccb4ef.js:15:150281)
    at <anonymous> (<anonymous>)

Is copying Image to clipboard Supported in ios

Describe the bug

@LuanEdCosta , I am trying to implement copying an image. It worked fine in Linux.
Failed in ios with an error saying The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. in both chrome and safari.

Same thing happened with the given demo: https://luanedcosta.github.io/copy-image-clipboard/

Isn't it suported in ios?

Browsers (please complete the following information)

Browser name: Safari
Version: 15.6

Browser name: Chrome
Version: 104.0.5112.88

Expected behavior

To be able to copy image

Screenshots

If applicable, add screenshots to help explain your problem.

I have this error in my nextjs app

Please help here.. How to solve this error?

luanedcosta / copy-image-clipboard Goto Github PK

copy-image-clipboard's Introduction

👋 Hello World

📧 Contact

❤️ Things I Like To Do

🚀 Published Projects

📈 Statistics

copy-image-clipboard's People

Contributors

Stargazers

Watchers

Forkers

copy-image-clipboard's Issues

Recommend Projects

Recommend Topics

Recommend Org