Question

我的网站上有一个图片上传按钮。这就是我希望它表现的方式：

用户单击“选择文件”按钮并选择图像。
图像显示在任何提交之前（使用javascript FileReader API）
裁剪插件应用于该图片，例如：http://www.jqueryrain.com/?BEAlLLl9
用户选择裁剪区域并点击“提交”。

我需要2到3之间的步骤帮助。使用FileReader API在选中它们时正确显示图像的问题是，它获得了一个base64编码的src属性。我使用的图像裁剪插件无法在图像上正确查找/初始化/绘制，因为它无法将src=""属性识别为有效。

如何实现步骤1-4？当然这已经在Facebook等主要网站上完成了吗？

Answer 1

http://html5.sapnagroup.com/demos/dragDropUploadsCrop/ 此链接将指导您的需求 http://html5.sapnagroup.com/2012/08/preview-and-crop-before-upload/

Files with following extensions are only allowed
        allowedExtensions: ['gif','jpg','jpeg','png','txt'],
        showCropTool: 1,
        sizeLimit: 10737418240, // Maximum filesize limit which works without any problems is 30MB. Current limit is set to 10MB = 10 * 1024 * 1024
        params: {
            'uploadedBy': 'Sapnagroup',
            'x1': '0',  // x coordinates of the image
            'y1': '0',      // x coordinates of the image
            'x2': '300',    // x coordinates of the image
            'y2': '150',    // y coordinates of the image
            'cWidth': '300',        // required crop width
            'cHeight': '150',       // required crop heignt
            'oWidth': '800',        // width of the crop preview image
            'oHeight': '600',       // height of the crop preview image
            'rWidth': '300',        // resize width
            'rHeight': '150'        // resize height
        },

Answer 2

要显示所选文件的预览，您可以使用createObjectURL方法：

var windowURL = $window.URL || $window.webkitURL;
var imageUrl = windowURL.createObjectURL(imageFile);

然后，当您有图像网址时，您可以显示裁剪选择的界面。

当选择要裁剪的区域时，您可以使用画布裁剪图像。

function crop(image, x1, y1, x2, y2) {
  var canvas = document.createElement('canvas');

  canvas.setAttribute('width', x2 - x1);
  canvas.setAttribute('height', y2 - y1);

  var context = canvas.getContext('2d');
  context.drawImage(image, -x1, -y1);

  return canvas;
}

之后，您可以使用画布（https://github.com/blueimp/JavaScript-Canvas-to-Blob）获取带有图像的Blob，可以使用XHR2将其上传到服务器。

预览图像并在上传之前裁剪图像

2 个答案: