Feature request: Copy as png

[Explosion-Scratch]

This would be tremendously useful in powerpoint presentations, google docs, gmail, etc, here's some JS code which converts PNG to SVG (I can work on a PR in a bit):

function toPng(svgHTML) {
	return new SvgToPngConverter().convert(
		`data:image/svg+xml;base64,${btoa(svgHTML)}`
	);
}

class SvgToPngConverter {
	constructor() {
		this._init = this._init.bind(this);
		this._cleanUp = this._cleanUp.bind(this);
		this.convertFromInput = this.convert.bind(this);
	}

	_init() {
		this.canvas = document.createElement("canvas");
		this.imgPreview = document.createElement("img");
		this.imgPreview.style = "position: absolute; top: -9999px";

		document.body.appendChild(this.imgPreview);
		this.canvasCtx = this.canvas.getContext("2d");
	}

	_cleanUp() {
		document.body.removeChild(this.imgPreview);
	}
	//Maybe take from viewbox or computed styles for width and height when copying?
	convert(input, { width = 128, height = 128 } = {}) {
		return new Promise((callback) => {
			this._init();
			let _this = this;
			this.imgPreview.onload = function () {
				const img = new Image();
				_this.canvas.width = width;
				_this.canvas.height = height;
				img.crossOrigin = "anonymous";
				img.src = _this.imgPreview.src;
				img.onload = function () {
					_this.canvasCtx.drawImage(img, 0, 0, width, height);
					let imgData = _this.canvas.toDataURL("image/png");
					if (typeof callback == "function") {
						callback(imgData);
					}
					_this._cleanUp();
				};
			};

			this.imgPreview.src = input;
		});
	}
}

[Explosion-Scratch]

Use this instead, it actually works lol:

https://github.com/Explosion-Scratch/userscripts/blob/3f882ee60c05d56784d242638c830cb4a808b75e/Easy_Select.user.js#L150-L169

[Explosion-Scratch]

Added in #69

[bennetfabian]

@antfu Could you take a look again?

I think many people in a business setting who want to use icons in keynotes etc cannot use svg.
Of course there would be the question of how to implement png output size options into the interface.

[Explosion-Scratch]

@bennetfabian I have added this in my fork of icones

[bennetfabian]

@bennetfabian I have added this in my fork of icones

First of all, thanks for your work!
Having a png download button is great and I hope @antfu will also be able to implement it here.

Please let me know about your thoughts on how to possible implement the wish some may have to be able to specify the exact size the exported png should have. The average users of PCs have no clue about what vector graphics are and how to use a SVG to PNG converter.

In many cases 256px may be big and good enough but I imagine there might be cases where you

1. might need a specific size PNG,
2. might need a PNG bigger than 256px.

I personally think this should be thought and discussed about.
The bar with all the different copy/download buttons is already really packed so maybe there could be a modal asking for the PNG size with the convienient option to save the input for later copies/downloads.

Of course this is a mattter which @antfu as the project's might want to make a point and give his opinion which I'm looking forward to.

[Explosion-Scratch]

In many cases 256px may be big and good enough but I imagine there might be cases where you

1. might need a specific size PNG,
2. might need a PNG bigger than 256px.

Specifying a size in a prompt box might be fine, e.g. something along the lines of 25x25

[Explosion-Scratch]

@bennetfabian Antfu just merged my PR - Currently it just copies at 512x512 pixels, which should be large enough for most applications of a PNG icon. I felt like having a prompt is kind of janky and limits the usability by adding an extra step.