Javascript 画布到todataurl未获取完整图像_Javascript_Jquery_Html_Canvas_Html5 Canvas

Javascript 画布到todataurl未获取完整图像

javascript jquery html canvas html5-canvas

Javascript 画布到todataurl未获取完整图像,javascript,jquery,html,canvas,html5-canvas,Javascript,Jquery,Html,Canvas,Html5 Canvas,我试图上传一幅图像，当用户从磁盘浏览一幅图像时，缩放后的图像在画布上显示为预览。要从画布获取缩放图像，dataurl图像仅显示半幅图像。当我尝试右键单击并从画布查看图像时，我得到了完整的图像url。这是我的密码 <html> <head> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scri

我试图上传一幅图像，当用户从磁盘浏览一幅图像时，缩放后的图像在画布上显示为预览。要从画布获取缩放图像，dataurl图像仅显示半幅图像。当我尝试右键单击并从画布查看图像时，我得到了完整的图像url。这是我的密码

<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#fileupload').change(function(){
        var MAX_WIDTH = 180;
        var MAX_HEIGHT = 120;

        var file = this.files[0];
        var canvas = document.getElementById('canvas');

        var img = document.createElement("img");

        var reader = new FileReader();

        reader.onload = function(e) {
            img.src = e.target.result;
        }

        img.onload = function(){
            var width = img.width;
            var height = img.height;

            if (width > height) {
              if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
              }
            } else {
              if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
              }
            }

            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.scale(1,1);
            ctx.drawImage(img, 0, 0, width, height);

            dataurl = canvas.toDataURL("image/png");
            alert(dataurl); //this path shows imcomplete image.

        }
        reader.readAsDataURL(file);
</script>
</head>
<body>
<input id="fileupload" type="file">
<canvas width="180" height="120" id="canvas"></canvas>
</body>
</html>


$（'#fileupload'）。更改（函数（）{
var MAX_WIDTH=180；
var最大高度=120；
var file=this.files[0]；
var canvas=document.getElementById（'canvas'）；
var img=document.createElement（“img”）；
var reader=new FileReader（）；
reader.onload=函数（e）{
img.src=e.target.result；
}
img.onload=函数（）{
变量宽度=img.width；
var高度=img高度；
如果（宽度>高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
画布宽度=宽度；
canvas.height=高度；
var ctx=canvas.getContext（“2d”）；
比例尺（1,1）；
ctx.drawImage（img，0，0，宽度，高度）；
dataurl=canvas.toDataURL（“image/png”）；
警报（dataurl）；//此路径显示不完整的图像。
}
reader.readAsDataURL（文件）；

您在哪个浏览器上遇到此问题？我尝试了您的代码，它工作正常。我正在使用

窗口。打开（dataurl）

在新窗口/选项卡中查看生成的图像并始终显示完整图片。这与此无关，但在当前的实现中，某些图片可能会得到高度>120px的预览。为避免此情况，请将

if（width>height）{…}

更改为

if（width>（180/120）*height）{…}