Изменение размера с помощью HTML5 Canvas - Distortion

Question

Я работаю над приложением Webworks, где мне нужно изменить размер изображения для загрузки на сервер. Я использую JQuery Mobile, приложение должно работать на OS6 и выше. Пользователь может либо использовать камеру, либо выбрать изображение с устройства. Соответствующий код выглядит следующим образом:

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); 
    } 

Затем я использую Base64 в DataURL для загрузки на сервер. Изображения становятся масштабируемыми, но они выглядят искаженными. Части изображения смещены, и цвета выглядят странно. Это не масштабирование как таковое, которое испортило изображение, поскольку оно появляется искаженным, если вы рисуете его на холсте без какого-либо масштабирования.

Я искал и SO, и форумы BB Dev широко, не повезло.

Кто-нибудь есть идеи, как исправить это или предложить альтернативное предложение для изменения размера изображения для загрузки?

Answer 1

мне удалось решить эту проблему, хотя, почему это работает ускользает от меня. Просто замените

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

с

return canvas.toDataURL(); 

Это возвращает строку в кодировке Base64 с правильно уменьшенным изображением без каких-либо странных визуальных артефактов.

Answer 2

Невозможно помочь с JQuery mobile, приложениями, запущенными на OS6, или с использованием Base64 в DataURL для загрузки на сервер, но ваш код для функции 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 ниже вы не получите никакого изображения, с его помощью вы получите масштабируется изображение правильно сформирован. Скрипка работает на моем смартфоне.

http://jsfiddle.net/FeALQ/