[英]convert svg to png using canvas and filereader
I try to convert svg to png. 我尝试将svg转换为png。 I works fine at first time but second time it crashed. 我第一次工作正常,但第二次崩溃。 I dont know how this happen. 我不知道这是怎么发生的。 my code is 我的代码是
function upload(file) {
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerHTML = "";
var img = new Image();
img.src = reader.result;
fileDisplayArea.appendChild(img);
img.onload = function() {
var canvas = document.createElement('canvas');
//var canvas = document.querySelector("canvas");
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
var a = document.createElement("a");
a.download = "image.png";
a.href = canvas.toDataURL("image/png");
a.click();
};
}
reader.readAsDataURL(file);
} else {
fileDisplayArea.innerHTML = "File not supported!"
}
}
error look like this 错误看起来像这样
i also try to take blob url but not success. 我也尝试采取blob url但不成功。 I think problem in img.onload function but i dont what's problem... Please help me 我认为img.onload功能有问题,但我没有什么问题...请帮帮我
I use the following to load svg files as the DataURL string as <img src=DataURL />
. 我使用以下命令将svg文件作为DataURL字符串加载为<img src=DataURL />
。 The <img>
is written as a DIV's innerHTML. <img>
被写为DIV的innerHTML。 It doesn't attempt to use canvas nor convert it to a png. 它不会尝试使用canvas,也不会将其转换为png。
The example below loads svg files from your computer. 下面的示例从您的计算机加载svg文件。 Give it a try for your app. 尝试一下您的应用。 Hope it works for you. 希望对你有效。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Preview SVG Image(s) From Your Computer</title>
</head>
<body style='font-family:arial;'>
<center>
<h4>Preview SVG Image(s) From Your Computer</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Preview the image of local SVG file(s) on your computer. Uses <b>FileReader</b> object to create <B>DataURL</B>
</div>
<div style='padding:10px;' id=imageDiv></div>
<input title="file to DataURL" onChange=loadSVGImg() type="file" id="ImgFile" />
<button onClick=clearData()>clear</button><br />
<div id=dataDiv></div>
<textarea id=dataValue style='width:90%;height:60px;font-family:lucida console;'></textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:3px;position:absolute;top:5px;left:5px;background-color:gainsboro;'></div>
<script id=myScript >
var Reader = new FileReader();
//---file onChange---
function loadSVGImg()
{
var imgFile = ImgFile.files[0]; // ---FileList objec
//--Only process image files---
if (imgFile.type.match('image.*'))
{
//---Closure to capture the file information---
Reader.onload = (function(theFile)
{
return function(e)
{
imageDiv.innerHTML += ['<img src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
imageDiv.innerHTML +="<br/>"+escape(theFile.name) +" @ "+ theFile.size +" bytes<br/>"
dataValue.value=e.target.result
dataDiv.innerHTML=escape(theFile.name)+" DataURL:"
};
})(imgFile);
//---Read in the image file as a data URL---
Reader.readAsDataURL(imgFile);
}
}
//---button---
function clearData()
{
imageDiv.innerHTML=""
dataDiv.innerHTML=""
dataValue.value=""
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
jsValue.value=myScript.text
}
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.