用HTML5画布调整图像大小 - 扭曲

我正在研究一个Webworks应用程序，我需要调整图像大小以便上传到服务器。我使用的是JQuery Mobile，应用程序需要在OS6上运行。用户可以使用相机或从设备上选择图像。相关代码如下：用HTML5画布调整图像大小 - 扭曲

function handleOpenedFile(fullPath, blobData) { 
      var image = new Image(); 
      image.src = fullPath; //path to image 
      image.onload = function() { 
       var resized = resizeMe(image); // send it to canvas 
       //Do stuff with the DataURL returned from resizeMe() 
      }; 
    } 

function resizeMe(img) { 

     var canvas = document.createElement('canvas'); 
     var width = Math.round(img.width/2); 
     var height = Math.round(img.height/2); 
     canvas.width = width; 
     canvas.height = height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, width, height); 
     return canvas.toDataURL("image/jpeg", 0.8); 
    }

然后我使用DataURL中的Base64上传到服务器。图像缩小但出现乱码。图像的一部分被转移，颜色变得很奇怪。如果您在画布上绘制图像而不进行任何缩放，则图像出现乱码并不是缩放本身。

我已经搜索过SO和BB开发论坛广泛没有运气。

有没有人有任何想法如何解决这个问题或有一个替代的建议调整图像上传？

来源

2013-07-19 Iyashu5040

男人，哦，男人。这个问题对我来说是一个讨厌的问题。去年秋季推出了iOS 6，增加了从相机/相机胶卷进行拍摄的功能。我还需要用Canvas调整大小。执行大小调整/旋转时，画布大小调整造成严重问题。看看这篇文章：http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios。最后，我写了一个小型库来解决问题，与此类似（但在此之前）：https：//github.com/stomita/ios-imagefile-megapixel。 –

对不起，笔记本电脑在我提交我的更多相关评论之前死亡。在iOS上，由于大图像上的二次采样，问题才发生。快速谷歌搜索显示，在黑莓手机上，至少有一个人有大图像的一些问题http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Problem-JavaScript-amp-Canvas-cannot-process - 大图像-GT/TD-p/2128847。您可以将小图像（比如100 x 100像素）下载到您的设备上，选择该图像，然后查看是否有相同的问题。 –

谢谢你的建议，我看了一下BB论坛的主题，试了一下没有成功的百万像素库。我用我找到的解决方案回答了我自己的问题。 – Iyashu5040

我已经设法解决这个问题，尽管为什么它令我困惑不解。只需使用

return canvas.toDataURL();

这将返回没有任何奇怪的视觉假象编码字符串与正确调整图像64基取代

return canvas.toDataURL("image/jpeg", 0.8);

。

来源

2013-07-22 09:56:00 Iyashu5040

无法帮助使用JQuery移动设备，在OS6上运行的应用程序或在DataURL中使用Base64上传到服务器，但您的代码为resizeMe函数不会将画布放置在任何HTML文档中。

下面添加了必要的行。

功能resizeMe（IMG）{

var canvas = document.createElement('canvas'); 
    var width = Math.round(img.width/2); 
    var height = Math.round(img.height/2); 
    canvas.width = width; 
    canvas.height = height; 
    var ctx = canvas.getContext("2d"); 
    document.body.appendChild(canvas); //append canvas child to body <<<<----------- 
    ctx.drawImage(img, 0, 0, width, height); 
    return canvas.toDataURL("image/jpeg", 0.8); 
}

如果这个额外的行中的jsfiddle是错过了下面你拿不出图像可言，有了它，你得到正确形成缩放图像。小提琴适用于我的andriod智能手机。

http://jsfiddle.net/FeALQ/

来源

2013-07-19 16:50:51 jing3142

我从来没有真的想要显示图像，我只是使用画布来缩小图像，以最大限度地减少上传数据时的成本。将尝试一下，并让你知道发生了什么。 – Iyashu5040

感谢您的建议，它帮助我意识到toDataURL方法是这种情况下的罪魁祸首。如果我可以的话，会upvote :) – Iyashu5040

用HTML5画布调整图像大小 - 扭曲

回答

相关问题