使用画布调整图像大小并将其更改为图像

时间:2015-05-09 20:06:54

标签: javascript html5

将画布转换为图像时遇到问题。 我尝试使用drawimage调整图像大小到画布,然后我将该画布的url作为另一个图像的源。

此方法在Firefox中完美运行但是当我在Chrome中尝试时,画布会显示图像,但是具有该画布网址的新图像不会显示。

我的代码:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<canvas id="CanvasNewImage"></canvas><br>
<img id="ResizedImg"><br>

<script type="text/javascript">

	var ImgLink;	
	var CanvasResize = document.getElementById('CanvasNewImage');
	CtxCanvasResize = CanvasResize.getContext('2d');
	CanvasResize.width = 800;
	CanvasResize.height = 800;
	
	var img = document.getElementById('ResizedImg');
	var ResizedImg=new Image();
	
	ResizedImg.src= "5.jpg";
	ResizedImg.onload = function() {
		CtxCanvasResize.drawImage(ResizedImg,0,0,200,200,0,0,200,200);
		ImgLink=CanvasResize.toDataURL("image\jpeg");
		img.src=ImgLink; 

	}


</script>
</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案