mushanshitiancai / vscode-paste-image Goto Github PK
View Code? Open in Web Editor NEWpaste image from clipboard to markdown/asciidoc directly!
License: MIT License
paste image from clipboard to markdown/asciidoc directly!
License: MIT License
Hey,
Thanks for making the extension. I'd like the pastes images to be named image-YMMDDHHmmSSSSS
, but this is seemingly currently not possible since the whole string is formatted according to https://momentjs.com/docs/#/displaying/format/ but the first part just plain text. Is this currently impossible?
If so could we add defaultNamePrefix
and defaultNameSuffix
? These would be the filename equivalent to the pasteImage.prefix
and pasteImage.suffix
we already have for the path.
Is it impossible to save the pasted images on a file in a folder whose name is same as the file's name?
I tried "pasteImage.basePath": "${currentFileDir}/${fileBasenameNoExtension�}"
, but it did not work.
Thanks for a really great extension!
What I would love to have is an option to change the file name of the image file when pasting. The option to specify the path of the image is already really good, but the cherry on top would be a configurable behavior which lets you specify a custom file name, right after hitting Meta-Alt-V.
Like this:
The feature should be configurable so that you can still keep the previous behavior (e.g. time stamp). Also it would be nice if it could use the filename setting as a default file name, so that you can just hit "Enter" in case you do not need a custom file name.
I admit I have no clue whether this is easy or difficult to implement in VS Code, but I would really love to have this functionality in.
In vscode
version 1.29,
The plugin does everything except paste the image file into the folder of the MD file. I am on the latest version of vs code as of today.
Is there a way to add a linebreak or new line to the insert pattern string?
I would like something like this in the settings:
[#imageId]\n.Caption\n${imageSyntaxPrefix}${imageFileName}${imageSyntaxSuffix}
So that the resulting text for the image in the document is like:
[#imageId]
.Caption
image::imageFileName.png[]
I would then manually update the imageId
and Caption
text for that image.
Hi love this extensions! Maybe I'm not using the settings correctly, but when I highlight a word then paste in the image it pastes in like this:
![](Repo_Layout.png)
but it would be really nice if the alt text could automatically be updated with the file name or path when pasting it in.
![Repo_Layout.png](Repo_Layout.png)
Thank you again for your hard work I love this extension makes documentation so much easier!
I saw that you have Windows and Linux support on your TODO list, so I took a look at what APIs would be most helpful to support those platforms.
Because VSCode uses Electron, I think this would be the easiest to hit all supported platforms at once:
var electron = require("electron")
var clipboardContents = electron.clipboard.availableFormats() // probably ["image/png"] for a screenshot on the clipboard
var clipboardImage = electron.clipboard.readImage();
var uriImage = clipboardImage.toDataURL(); //if you wanted to embed the entire image in the markdown
var pngBuffer = clipboardImage.toPng() //returns a node Buffer that contains a png that you
//could write to disk: https://nodejs.org/api/buffer.html#buffer_class_buffer
var fs = require("fs")
fs.writeFile("/path/to/file.png",pngBuffer, (err) => {
if(err) {
console.error("Error",err);
} else {
console.log("done")
}
});
Can you add the ability to copy gif. Now when I copy .gif, it will be save as png.
And How to save a picture with the original filename on the internet?
I configured as readme. But when i copy a img from shortcut or file. The file generated in my configured path is always empty, which means when i press ctrl+alt+v, a file is generated in the right path but it's size is 0.
it would be nice to be able to have multiple insert patterns ( basename, prefix etc) according to html markdown or latex files.
Is it possible to implement this feature ?
Tks for the great plugin !
In settings i am setting the path property to "pasteImage.path": "${currentFileDir}\\assets"
However when i enter the paste command, the "assets" folder is created but the image is not.
image compression feature
I've here from LaTeX-Workshop#1478 where I basically took the paste image code here and modified it to make it work well with LaTeX documents, and the extension. We've concluded that from a modularity point of view it would be better for this extension to be modified to support LaTeX documents, than adding all the file/path manipulation code here into the LaTeX workshop extension.
Would you be open to this idea? If so I'll make a PR that does the following things:
Those are the main things I can think of, there may be other small tweaks involved; which I will raise when I get to them.
thanks,
tecosaur
We often try to keep binaries out of GIT repositories, it would be nice if it was possible on paste to upload image to Azure Blob Storage and get blob absolute url to uploaded file as markdown.
Would be a convenient addition.
非常好用的插件,希望能够提供vsix方便离线安装
I had been using your extension for a short while and for some reason I guess it malfunctioned, temporarily creating the perfect extension for my use. For a while (until I reloaded it) it was not inserting the markdown container around my images, which for me was great!
I have my config set up such that a pasted image is prefixed and suffixed with the HTML necessary to display the image centered at 90% width:
eg.
<div align="center"><img src="img/2018-04-15-15-48-09.png" width="90%"><p style="font-size: 80%;"><i>title of image</i></p></div>
When the plugin was not working as designed, pasting images into my Markdown worked perfectly (because it wasn't adding the ![](
and )
).
Images pasted into Markdown get the user's custom prefix and suffix attached, like this:
imageFilePath = `${prefix}${imageFilePath}${suffix}`;
and then are wrapped in a Markdown image container:
switch (languageId) {
case "markdown":
return `![](${imageFilePath})`
Resulting in:
![](<div align="center"><img src="img/2018-04-15-15-48-09.png" width="90%"><p style="font-size: 80%;"><i>title of image</i></p></div>)
At this point in your code, you add the symbols to have Markdown recognize it as an image. Perhaps we could make this a conditional operation, that checks pasteImage.mdContainer
for true
(current/default) or false
.
I use HTML formatting on my Markdown images, so I don't want the Markdown ![](
image container)
inserted automatically.
Here's my configuration:
Paste Image
0.9.5
settings.json
{
"pasteImage.path": "${currentFileDir}/img",
"pasteImage.prefix": "<div align=\"center\"><img src=\"",
"pasteImage.suffix": "\" width=\"90%\"><p><i>title goes here</i></p></div>",
}
VSCode:
1.22.2
3aeede733d9a3098f7b4bdc1f66b63b0f48c1ef9
x64
Screenfetch:
-/+:. stvhwrd@macduck
:++++. OS: 64bit Mac OS X 10.12.6 16G1314
/+++/. Kernel: x86_64 Darwin 16.7.0
.:-::- .+/:-``.::- Uptime: 4d 10h 43m
.:/++++++/::::/++++++/:` Packages: 229
.:///////////////////////:` Shell: zsh 5.5
////////////////////////` Resolution: 2880x1800
-+++++++++++++++++++++++` DE: Aqua
/++++++++++++++++++++++/ WM: Quartz Compositor
/sssssssssssssssssssssss. WM Theme: Blue
:ssssssssssssssssssssssss- CPU: Intel Core i7-4770HQ @ 2.20GHz
osssssssssssssssssssssssso/` GPU: Intel Iris Pro
`syyyyyyyyyyyyyyyyyyyyyyyy+` RAM: 10532MiB / 16384MiB
`ossssssssssssssssssssss/
:ooooooooooooooooooo+.
`:+oo+/:-..-:/+o+/-
It would be great if this extension would support AsciiDoc
http://asciidoctor.org/docs/asciidoc-syntax-quick-reference/#images
Hi, I'm trying to use your amazing plugin under this environment:
When I try to paste any image, the little pop-up window tells me that "there is not a image in your clipboard". Your plugin works beautifully when I run VS Code directly on Windows 10.
Do you have any solutions?
Please don't use Ctrl+Alt shortcuts as default shortcuts. They interfere with normal operation when working with international keyboards. The Ctrl+Alt combination is mapped to AltGr key which enables user to enter alternative characters. For example, on my keyboard, AltGr+V should enter "@". Instead, it triggers this extension.
VSCode recently added support for Remote Development. When this extension is installed remotely and I take screenshot locally, pasting of image to remote document does not work since the extension cannot access the local clipboard.
Would it be possible to access local clipboard when this extension is installed remotely?
I am in Windows, I created a new relative path as following..
"pasteImage.path": "./images"
But when I paste image it seems like "" is placed instead of "/" and Git hub is not rendering the image.
I think it should be
![](images\2017-03-22-09-27-53.png)
instead of
![](images/2017-03-22-09-27-53.png)
Let me know If I am missing some thing...
Any tips? I searched through the closed issues and didn't find any resolutions or anything so just curious if there is a known issue with pasting after changing those settings... or if there is anyway to verify them or debug them?
我很喜欢这个功能,但我下载这个插件后无法正常使用。通过Ctrl+Shift+P输入paste image命令或者Ctrl+Alt+V都没有任何反应,确认剪切板中有图片。
我最近才开始用VS code,是1.10.2,目前的最新版本,是不是VS Code升级导致这个插件失效了?希望作者能fix下。
Just a heads up, on a fresh install of Ubuntu 18.04 and VS Code, I was asked to install xclip
(sudo apt-get install xclip
) when attempting my first image paste using the extension.
This plugin is really nice, but I found that the extension settings are not working.
I am using this plugin for my hexo, and I modified the user-settings as follow:
Then after I pasted an image by using "Ctrl+Alt+V",the plugin behaved like this:
But actually, it was expected to behave like this:
While the image was inserted to the path correctly.
I think the plugin ignored my custom settings and turned to use the default setting. However, I found there no similar issue, that's totally strange.
Is this a bug or just wrong environmental settings, could you please answer my quesion? Thank U so much.
Windows 10,
VSCode: 1.42.0
VSCode-paste-image: 1.0.4
If you've ever used Anki, there is an option to delete unused assets.
Can you implement an option to delete assets not referenced by a markdown uri?
Hello,
Thank you for your work on this extension. Today I took many screenshots with the tool. All screenshots were pasted into the .md file as normal:
HOWEVER, the files were created in the assets/
folder with an "_" in the date as opposed to a "-".
This caused all screenshots to not appear in preview. I had to correct all the filenames.
Do you know why this occurred?
Hi
I am able to paste only via command palette. The key board short cut Ctrl+Alt+V
is not working. I checked the keyboard extension it is the same, but its not working. So it is tedious to go to command palette every time and paste. Any work around?
When using ${currentFileNameWithoutExt} or ${currentFileName}, if there are spaces in the file name, the link would not work.
Need to encode space to %20 to make it work.
您好,
今天升级了新版本,不过无法自动新建文件夹了。
我设置的参数是:
"pasteImage.path": "${currentFileDir}/images/"
其他参数不变。
如果没有images文件夹时,会警告说Running the contributed command:'extension.pasteImage' failed.
如果存在images文件夹时,顺利粘贴。
这次的更新非常棒,期待下一个版本~
Add pre-requisite system package xclip in README.md:Usage section.
Hello, I'm unable to get this working on Fedora Core 28. I have installed xclip from the default repo, but still get the error of
You need to install xclip command first.
The same result happens regardless of how I paste it
$ uname -a
Linux desktop 4.16.13-300.fc28.x86_64 #1 SMP Wed May 30 14:31:00 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
$
$ xclip -version
xclip version 0.13
Copyright (C) 2001-2008 Kim Saunders et al.
Distributed under the terms of the GNU GPL
$
I tested xclip and it works fine within the terminal
$ uptime | xclip
$
$ 19:42:01 up 8 min, 2 users, load average: 0.42, 0.49, 0.29
bash: 19:42:01: command not found...
$
$ echo "test" | xclip
$ test
Am I missing something, do I need to add an extra step?
This is exactly what I'm looking for!!
Currently it paste image in the same folder, would it be possible to create a subfolder, like images then put all images under that folder?
When pasting an image into Visual Studio Code markdown file, the image will be completely blank with every pixel transparent.
Ctrl+Alt+V
and wait for the insertion of the image.You can see that the image pasted is transparent.
And to reveal it in the explorer, it is also transparent.
But actually, it can be pasted into other applications such as what I'm writing on GitHub issues.
First i want to thank you for your plugin!
My config is this:
"pasteImage.path":"${currentFileDir}/assets/${currentFileNameWithoutExt}"
so my result imagename is:
![](assets/Bestellprozesse/2018-01-23-13-46-54.png)
How to change the Filename to this ?
![](assets/Bestellprozesse_2018-01-23-13-46-54.png)
Hi,
I can't quite figure out how to put all images into a subdirectory assets/
at the location of the current markdown file. All the examples seems to refer to the project root. I tried this:
"pasteImage.basePath": "${currentFileDir}/assets/"
But it still puts the images in the same folder as the markdown file and the path of all the images gets prepended with ../
, such that:
![](2018-10-19-10-43-32.png)
becomes
![](../2018-10-19-10-43-32.png)
So the setting above actually just breaks the image insertions (since the file is still in same folder as the md file) instead of doing what I want. Any suggestions?
非常感谢,这个很好用,但是有两个问题
.\image\xxx.png
预览的时候不能显示图片需要变为 ./image/xxx.png
才可正常
/**
* Convert the given Windows or Unix-style path into a normalized path that only uses forward slashes and has all superflous '..' sequences removed.
* If the path starts with a Windows-style drive letter, a '/' is prepended.
*/
Paster.normalize = function(pathStr) {
pathStr = pathStr.replace(/\\/g, '/');
if (/^[a-zA-Z]\:\//.test(pathStr)) {
pathStr = '/' + pathStr;
}
pathStr = path.normalize(pathStr); // use node's normalize to remove '<dir>/..' etc.
pathStr = pathStr.replace(/\\/g, '/');
return pathStr;
};
// generate image path
if (path.isAbsolute(folderPathFromConfig)) {
imagePath = path.join(folderPathFromConfig, imageFileName);
}
else if('.' === folderPathFromConfig.charAt(0)){
imagePath = path.join(folderPath, folderPathFromConfig, imageFileName);
}
else {
imagePath = path.join(vscode.workspace.rootPath, folderPathFromConfig, imageFileName);
}
return imagePath;
老哥能否开发支持下上传到七牛或者自己服务器图床,在粘贴图片的时候。并且我试了本地的粘贴也不管用。
Opened this issue erroneously, but can't delete it. Sorry
This extension frees me a lot of tedious work, thanks.
Commonly, I have some requirements copying web images, and I know I can make a capture and paste it using this extension. But sometimes I want to grab the orignal image. Is this feature possible to be considered in your development?
Instead of creating a separate file, would be nice to have the option to embed the image inline using base64 data-uri attribute
Example
![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.