Image 读取客户端上的文件图像数据并调整其大小

Image 读取客户端上的文件图像数据并调整其大小,image,html,canvas,resize,html5-canvas,Image,Html,Canvas,Resize,Html5 Canvas,我有图库管理器和放置区(用于图库图像)。 当文件丢失时。我使用FileReader读取并获取图像的base64数据。 我的目标是调整客户端上所有图像的大小(制作拇指/普通图像)。 问题:我可以将base64放入画布,然后调整画布的大小,并获得新的base64大小的图像吗 $.getImageData({ url: "http://farm4.static.flickr.com/3002/2758349058_ab6dc9cfdc_z.jpg?zz=1", success: functio

我有图库管理器和放置区(用于图库图像)。 当文件丢失时。我使用FileReader读取并获取图像的base64数据。 我的目标是调整客户端上所有图像的大小(制作拇指/普通图像)。 问题:我可以将base64放入画布,然后调整画布的大小,并获得新的base64大小的图像吗

$.getImageData({
  url: "http://farm4.static.flickr.com/3002/2758349058_ab6dc9cfdc_z.jpg?zz=1",
  success: function(image){

    // Set up the canvas
    var can = document.getElementsByTagName('canvas')[0];
    var ctx = can.getContext('2d');

    // Set the canvas width and heigh to the same as the image
    $(can).attr('width', image.width);
    $(can).attr('height', image.height);

    // Draw the image on to the canvas
    ctx.drawImage(image, 0, 0, image.width, image.height);

    // Get the image data
    var image_data = ctx.getImageData(0, 0,  image.width, image.height);
    var image_data_array = image_data.data;


    // Write the image data to the canvas
    ctx.putImageData(image_data, 0, 0);

  },
  error: function(xhr, text_status){
    // Handle your error here
  }
});