Canvas image to blob, изменение размера изображения

У меня есть холст, который масштабирует изображение, чтобы соответствовать ему, то, что я пытаюсь сделать, - это экспортировать изображение большего размера, чем размер холста. Я использую метод canvas.toBlob для получения данных blob и отправляю их на мой сервер в качестве загруженного файла.Canvas image to blob, изменение размера изображения

Например, canvas 350px на 350px, я хотел бы сохранить изображение размером 800px на 1000px.

<canvas id="myCanvas" width="350" height="350"></canvas> 

<script type="text/javasript"> 
    var canvas = document.getElementById('myCanvas'); 

    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
     imageObj.onload = function() { 
      var img_info = { width:527, height:350 }; 
      var sourceX = 0; 
      var sourceY = 150; 
      var sourceWidth = 4520; 
      var sourceHeight = 3000; 
      var destWidth = img_info.width; 
      var destHeight = img_info.height; 
      var destX = canvas.width/2 - destWidth/2; 
      var destY = canvas.height/2 - destHeight/2; 

      context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 
     }; 

    imageObj.src = 'hhttp://i.imgur.com/tKplLLb.jpg'; 

    canvas.toBlob(
     function (blob) { 
      var formData = new FormData(); 
      formData.append('file', blob); 

      jQuery.ajax({ 
       url: "test.php", 
       type: "POST", 
       data: formData, 
       processData: false, 
       contentType: false, 
       success: function (res) { 

       } 
      }); 
     }, 
    'image/jpg' 
    ); 
</script>

источник

2013-12-12 Brian Putt

Почему бы не использовать DrawImage масштабировать изображение на второй, скрытый холст и использовать toBlob на результат? – Gaurav

@Gaurav не плохая идея, и я попытаюсь понять, поддерживает ли она одинаковое соотношение сторон. –

Эта функция принимает параметры холста и ширины + высоты. Она возвращает новый холст элемент, на котором вы можете позвонить toBlob

function getResizedCanvas(canvas,newWidth,newHeight) { 
    var tmpCanvas = document.createElement('canvas'); 
    tmpCanvas.width = newWidth; 
    tmpCanvas.height = newHeight; 

    var ctx = tmpCanvas.getContext('2d'); 
    ctx.drawImage(canvas,0,0,canvas.width,canvas.height,0,0,newWidth,newHeight); 

    return tmpCanvas; 
}

Рабочий пример здесь: http://jsfiddle.net/L4dua/

источник

2013-12-12 22:22:43 lostsource

Спасибо, что закончил тем, что предложил Guarav. Я +1 ваш ответ –

Canvas image to blob, изменение размера изображения

ответ

Смежные вопросы