I am trying to create new empty image with width and height and save it as png to file.
This is what i got:
var myImage = new Image(200, 200);
myImage.src = 'picture.png';
window.URL = window.webkitURL || window.URL;
var contentType = 'image/png';
var pngFile = new Blob([myImage], {type: contentType});
var a = document.createElement('a');
a.download = 'my.png';
a.href = window.URL.createObjectURL(pngFile);
a.textContent = 'Download PNG';
a.dataset.downloadurl = [contentType, a.download, a.href].join(':');
document.body.appendChild(a);
I am trying to get transparent image with given width and height in var myImage new Image(200, 200) as the output on the download.
The Image element can only load an existing image. To create a new image you will have to use canvas:
var canvas = document.createElement("canvas");
// set desired size of transparent image
canvas.width = 200;
canvas.height = 200;
// extract as new image (data-uri)
var url = canvas.toDataURL();
Now you can set url as href source for the a-link. You can specify a mime-type but without any it will always default to PNG.
You can also extract as blob using:
// note: this is a asynchronous call
canvas.toBlob(function(blob) {
var url = (URL || webkitURL).createObjectURL(blob);
// use url here..
});
Just be aware of that IE does not support toBlob() and will need a polyfill, or you can use navigator.msSaveBlob() (IE does neither support the download attribute so this will kill two birds with one stone in the case of IE).
Thank you K3N for replying to my question but i did not have time to wrap my head around your answer.
Your answer was just what i needed!
Here is what i got:
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
var url = canvas.toDataURL();
var a = document.createElement('a');
a.download = 'my.png';
a.href = url;
a.textContent = 'Download PNG';
document.body.appendChild(a);
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
var url = canvas.toDataURL();
var a = document.createElement('a');
a.download = 'my.png';
a.href = url;
a.textContent = 'Download PNG';
document.body.appendChild(a);
Related
const arrUrl = [
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200',
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200',
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200',
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200'
];
there is an array of different links to photos, how to make them all in base64, I have a script that makes base64 photos, but I can't combine them
var img = new Image();
img.crossOrigin = 'Anonymous';
// The magic begins after the image is successfully loaded
img.onload = function () {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
ctx.drawImage(img, 0, 0);
// Unfortunately, we cannot keep the original image type, so all images will be converted to PNG
// For this reason, we cannot get the original Base64 string
var uri = canvas.toDataURL('image/png'),
b64 = uri.replace(/^data:image.+;base64,/, '');
console.log(b64); //-> "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4z8DwHwAFAAH/q842iQAAAABJRU5ErkJggg=="
};
// If you are loading images from a remote server, be sure to configure “Access-Control-Allow-Origin”
// For example, the following image can be loaded from anywhere.
var url = '//static.base64.guru/uploads/images/1x1.gif';
img.src = url;
or
https://gist.github.com/CawaKharkov/1c477d44fcfdf67aea3f/revisions#diff-7b3e9484330c338cea137079906c2390c4961003e07e3a9d13bed49d9d63805eR17
Code:
var myCanvas = document.createElement('canvas');
myCanvas.width = 596;
myCanvas.height = 350;
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = url;
img.onload = function(){
ctx.drawImage(img,0,0);
};
let dt = myCanvas.toDataURL('image/jpg');
var aLink = document.createElement('a');
aLink.href = dt;
aLink.download = 'fixed_photo.jpg';
aLink.click();
Result:
It Downloads an empty Canvas instead of the image from the url. my guess it has something to do with s3 permission, i am using the getObject of S3 aws-sdk.
Try opening the developer tools in your web browser and check the network tab. It should let you know if the request failed and the status code.
I am generating an svg with dynamically filled images as patterns. When I export this to png, I get a blank svg without any fill images. I have tried javascript as well as c# code.
Javascript code:
var svg = document.querySelector('#element3 svg');
var data1 = (new XMLSerializer()).serializeToString(svg);
var encodedData = window.btoa(data1);
var data = 'data:image/svg+xml;base64,' + encodedData;
image.src = data;
$('[id$=objimage]').attr('data', data);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.download = "image.png";
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
C# code:
var byteArray = Encoding.ASCII.GetBytes(input.ImageData);
using (var stream = new MemoryStream(byteArray))
{
var svgDocument = SvgDocument.Open(stream);
var bitmap = svgDocument.Draw();
bitmap.Save(HttpContext.Current.Server.MapPath("~/Images/Pattern/UserPattern/testimg.png"), ImageFormat.Png);
}
Can anyone please help in this?
i have the canvas in which one image is displaying as it's background and other image is placed in the centre of that image. now i want to save that complete canvas. My recent code is not saving it..
you can see the demo here [ http://jsfiddle.net/himani/gqc9b0qd/3/ ]
var can = document.getElementsByTagName('canvas')[0];
var ctx = can.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 6;
ctx.lineJoin = 'round';
ctx.strokeRect(40,100,150,100);
var angleInDegrees=0;
var img = document.getElementsByTagName('img')[0];
img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg";
ctx.drawImage(img,40,100,150,100);
function drawRotated(degrees){
ctx.clearRect(0,0,300,300);
ctx.save();
ctx.translate(40+150/2,100+100/2);
ctx.rotate(degrees*Math.PI/180);
ctx.strokeRect(-150/2,-100/2,150,100);
ctx.drawImage(img,-150/2,-100/2,150,100);
ctx.restore();
}
$("#clockwise").click(function(){
angleInDegrees+=30;
drawRotated(angleInDegrees);
});
$("#save").click(function(){
var ua = window.navigator.userAgent;
if (ua.indexOf("Chrome") > 0) {
// save image without file type
var canvas = document.getElementsByTagName('canvas')[0];
document.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
// save image as png
var link = document.createElement('a');
link.download = "test1.png";
link.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");;
link.click();
}
else {
alert("Please use Chrome");
}
});
If you want to export with toDataUrl an image from a cross origin request, try define the crossOrigin attribute on your image.
var img = document.getElementsByTagName('img')[0];
img.crossOrigin = "anonymous";
img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg";
img.onload = function () {
ctx.drawImage(img,40,100,150,100);
};
It worked just fine for me. Fore more information about this attributes and the availables values, take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Attributes
I'm working on an SVG graphic export (with d3.js library) to PNG. The problem is the label textPath. When exporting to PNG, the text does not appear. Does anyone know if there is solution for this problem?
The code I'm using to do the conversion is:
var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg'));
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
var a = document.createElement("a");
a.download = "grafico.png";
a.href = png;
a.click();
DOMURL.revokeObjectURL(png);
};
img.src = url;
Thank you very much to all.
A greeting,
Sonia
Fixed. I've solved with attributes in the css style-sheet such as:
font-size: 16px;
color: black;
fill: none;
Same issue here. It seems that this method of conversion is not getting the body's font-size. However, dumping the generated SVG into a .svg file and opening that file in the browser renders correctly.