samedi 9 mai 2015

Resize Image using canvas and change it to image

well, i have a problem with converting a canvas to an image. i try to resize an image using drawimage to canvas, and then i take the url of that canvas to the source of another image. thise methode is wokring perfect in firefox but when i try int in chrome, the canvas shows the image but the new image wich have the url of that convas doesn't show up. i was looking for a solution but i didn't found, please can anyone help me to solve this problem, and sorry for my bad english. this is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<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>

Aucun commentaire:

Enregistrer un commentaire