js 手机版裁剪图片上传

在JavaScript中进行手机版图片裁剪并上传，通常涉及以下几个基础概念和技术点：

基础概念

Canvas API：HTML5提供的Canvas元素可以用来在网页上绘制图形，包括图片的裁剪和处理。
FileReader API：用于读取文件内容，特别是图片文件，以便在Canvas上进行操作。
FormData：用于构造表单数据，方便通过AJAX上传文件到服务器。
AJAX/Fetch API：用于异步与服务器通信，上传裁剪后的图片。

优势

用户体验：允许用户在设备上直接裁剪图片，提高了交互性和便利性。
性能优化：在客户端进行裁剪可以减少服务器端的处理负担。
灵活性：可以根据需求定制裁剪框的大小和形状。

类型

固定尺寸裁剪：用户只能在预设的尺寸内裁剪图片。
自由裁剪：用户可以在任意位置和尺寸裁剪图片。

应用场景

社交媒体：用户上传头像或发布带图片的动态时进行裁剪。
电商平台：商品详情页允许用户上传并裁剪商品图片。
在线教育：制作课程封面或截图时进行图片裁剪。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript实现手机版图片裁剪并上传：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片裁剪上传</title>
<style>
  #imagePreview {
    max-width: 100%;
    height: auto;
  }
</style>
</head>
<body>

<input type="file" id="fileInput" accept="image/*">
<canvas id="canvas" style="display:none;"></canvas>
<img id="imagePreview" alt="预览">
<button onclick="uploadImage()">上传</button>

<script>
  let originalImage = new Image();
  let cropStartX, cropStartY, cropEndX, cropEndY;

  document.getElementById('fileInput').addEventListener('change', function(event) {
    let file = event.target.files[0];
    let reader = new FileReader();
    reader.onload = function(e) {
      originalImage.src = e.target.result;
      originalImage.onload = function() {
        document.getElementById('imagePreview').src = originalImage.src;
        document.getElementById('canvas').width = originalImage.width;
        document.getElementById('canvas').height = originalImage.height;
      };
    };
    reader.readAsDataURL(file);
  });

  document.getElementById('imagePreview').addEventListener('touchstart', function(event) {
    cropStartX = event.touches[0].clientX;
    cropStartY = event.touches[0].clientY;
  });

  document.getElementById('imagePreview').addEventListener('touchend', function(event) {
    cropEndX = event.changedTouches[0].clientX;
    cropEndY = event.changedTouches[0].clientY;
    drawCroppedImage();
  });

  function drawCroppedImage() {
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(originalImage, cropStartX, cropStartY, cropEndX - cropStartX, cropEndY - cropStartY, 0, 0, cropEndX - cropStartX, cropEndY - cropStartY);
    document.getElementById('imagePreview').src = canvas.toDataURL();
  }

  function uploadImage() {
    let canvas = document.getElementById('canvas');
    let dataURL = canvas.toDataURL('image/jpeg', 0.9);
    let blob = dataURItoBlob(dataURL);
    let formData = new FormData();
    formData.append('file', blob, 'cropped.jpg');

    fetch('/upload', {
      method: 'POST',
      body: formData
    }).then(response => response.json())
      .then(data => {
        console.log('上传成功:', data);
      }).catch(error => {
        console.error('上传失败:', error);
      });
  }

  function dataURItoBlob(dataURI) {
    let byteString = atob(dataURI.split(',')[1]);
    let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    let ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});
  }
</script>

</body>
</html>

可能遇到的问题及解决方法

跨域问题：如果图片来源于不同的域，可能会遇到CORS（跨源资源共享）问题。解决方法是确保服务器端设置了正确的CORS头。
性能问题：处理大尺寸图片时可能会导致性能下降。可以通过压缩图片或在服务器端进行进一步处理来优化。
兼容性问题：不同浏览器对Canvas和FileReader API的支持可能有所不同。可以通过特性检测和polyfill来解决兼容性问题。

通过上述代码和解决方案，可以在手机版上实现图片的裁剪和上传功能。

页面内容是否对你有帮助？

有帮助

没帮助

如何上传多张图片，但最多只能上传12张(通过智能手机)

、、、、

我目前使用的是一个很酷的裁剪插件，叫做。我想通过<input type="file" multiple/>一次上传多个图像，裁剪并保存它们一次。我的目标是能够从智能手机上传图片，因为单独上传每一张图片并不是很友好。但!我想将图像选择限制为12个图像。有没有办法做到这一点？

浏览 1提问于2017-01-14得票数 0

2回答

如何用本机相机拍照，裁剪成平方，然后上传到Parse.com作为ParseFile？

、、、、

我如何使用本地手机相机拍照，然后将其裁剪成平方，然后像这样上传到Parse.com作为ParseFile。解析中表的名称是“图片库”，必须保存的列的名称是“照片”。有人能帮帮我吗。我根本不需要把图片保存到手机上，只需要上传它来解析，然后丢弃它！提前感谢！

浏览 1提问于2015-09-04得票数 0

回答已采纳

1回答

使用dropzne js在上传前裁剪多张图片

、、、、

我正在使用Bootstrap和dropzone.js，以使用户可以通过拖放上传图像。因此，我创建了一个拖放区域，即使是多张图片也能正常上传。但现在，我想在上传之前裁剪图片。我认为dropzone.js初始化函数中的this.on("added file", function(file){事件是正确的地方，但我不知道如何转换文件，以便在特殊模型中逐个裁剪文件并上传裁剪后的图像

浏览 2提问于2017-01-07得票数 1

1回答

停止Dropzone.js剥离exif数据

、、

有没有什么办法可以让dropzone.js把exif数据和它上传的图像一起保存下来？我有一个asp.net应用程序，它可以获取用户上传的图像的日期/时间，并且使用asp.net文件上传控件一直工作得很好。我想实现Dropzone.js --但是每个上传的文件似乎都缺少我能够通过fileupload控件读取的所有exif数据。

浏览 2提问于2015-05-13得票数 0

1回答

带主干的Jcrop /jquery

、、、

我正在使用jquery，我想为我的项目实现Jcrop。但在我看到的所有示例中，它都是用php实现的。我不太擅长php。有没有人能帮我讲讲如何在JQuery中使用Jcrop？

浏览 1提问于2012-08-16得票数 0

1回答

yii2的multiple upload with multiplecrop

、、、、

在FileApi或FileApi高级版中可以使用多个裁剪(多个上传)吗？通过此Yii2库关系: Gallery HAS_MANY Gallery_photos 其他库有什么建议吗？

浏览 0提问于2014-06-16得票数 0

1回答

嗨，谢谢你的阅读:很抱歉，如果我的问题是重复的，但我没有找到一个answer..Although，我认为我的问题相当“标准”：我有一个表单，有各种输入(个人细节等)&我需要用户上传一个图像，这样他/她就可以裁剪/选择一个区域，最后上传和保存。我已经成功地使用PHP服务器端调整大小上传和显示大小的图像。没问题。这似乎主要是通过使用表单中的action标记重定向到phps脚本来实现的。使用表单的操作标记完成PHP服务器端的裁剪(通常使用隐藏输入(x、y、w、h.)(使用jQuery

浏览 0提问于2014-12-04得票数 2

2回答

摄像头视图的android采集部分

、、

我基本上想要这样的东西：我试着用AndroidStudio做同样的事情，在屏幕上添加一张图片，结果如下：这是丑陋的，但它只是为了尝试。我知道，在这种情况下，我需要拍摄整个图片，并通过软件正确地缩放它。但是，对于不同的屏幕尺寸，我必须做不同的处理。这看起来非常困难。相反，有没有可能直接修改cameraView (SurfaceView或SurfaceHolder)，这样我就不需要图像了，图片将自动适合“遮罩”，因为它实际上是相机唯一能看到的东西。

浏览 1提问于2015-04-23得票数 0

2回答

高效的ionic2图片上传

我正在使用ionic2传输插件上传图片。图像正在成功上载到云中，但上载时间较长。如何在ionic2应用程序中加速图片上传。有人能帮上忙吗？

浏览 2提问于2017-07-14得票数 0

1回答

当切换到手机上的横向模式时，网站无法正常扩展

、、、、

我用@media创建了一个响应式网站，有桌面版和移动版。一切都很完美，除了你在景观手机或ipad上浏览网站的时候。以下是网站：我不能上传3

浏览 3提问于2017-02-27得票数 0

1回答

读取图像大小并隐藏watemark

、

</div>我使用wordpress，所以我得到了上传的图片，并在底部的图片上做了watemark标记。我想把这个40px隐藏在botton上。

浏览 1提问于2015-01-14得票数 1

2回答

如何在上传图像前在图像拾取器中裁剪图像

我想在上传图片之前裁剪图片。我正在学习这个教程。现在我在上传之前裁剪图片有问题。如何在编码中实现裁剪功能？有谁可以帮我？非常感谢。

浏览 3提问于2019-02-02得票数 4

回答已采纳

1回答

Laravel 8图像裁剪上传维度限制

、、、

在上传到Laravel之前，我已经看过很多关于裁剪图片的教程。我的问题是，我不希望用户在上传之前决定图像的尺寸。我想要设置默认尺寸，这样用户所要做的就是拖动图像的哪些区域，以我为其设置的尺寸进行裁剪。有没有什么JS包可以让我轻松做到这一点？谢谢。

浏览 29提问于2021-08-12得票数 0

2回答

LinkedIn RichMedia上载

、

我使用richmedia API上传了一张图片到LinkedIn，并使用Share API创建了一个帖子，这就是帖子link。但创建的帖子有扭曲的图像，如下图所示，图像的侧面有灰色条。 ? 当我直接通过LinkedIn上传相同的图像时，它正在调整大小，并且图像显示没有任何灰条。为什么在使用LinkedIn接口创建媒体时会出现这个问题？通过API上传媒体是否有分辨率限制？我正在尝试上传的原始图像： ? 提前感谢您的帮助。

浏览 15提问于2019-01-11得票数 0

回答已采纳

1回答

用JQuery菲勒“攻击”克罗维特

、、

我正在使用(现在称为)在表单数据中上传带有复选标记的图像，以标记要使用的主图像。我需要额外的功能，即裁剪，不幸的是，JQuery不支持裁剪(如果我错了，请纠正我) 我的问题是，如何使用这两个单独的js库(如果您有任何其他与JQuery fi

浏览 6提问于2017-04-03得票数 0

2回答

默认情况下裁剪特征图像

我很难找到如何做到这一点-我想显示一个裁剪版本的图片在文章中。所以当它上传的时候，它会自动显示裁剪。有什么办法吗？例如，这将是上传的原始图像和这就是这篇文章里的样子是否有办法将裁剪设置为默认值？如果用户上传已经裁剪过的图片，那就太好了，但如果他们不上传，我想做个退路。

浏览 0提问于2013-06-04得票数 0

回答已采纳

1回答

使用JS在实时摄像机上进行帧处理？

、

我构建了一个简单的JS web应用程序，它通过上传获取护照图像，并尝试使用图像js模块中的图像处理技术从护照图像中只裁剪MRZ。然而，我构建的这个应用程序只适用于从照片库上传的静止图像，或者是从相机上获取的手机。我怎样才能以最简单的方式对每一帧进行图像处理？

浏览 3提问于2022-05-20得票数 0

回答已采纳

1回答

在angular中裁剪和上传图像

、、

我想在角度裁剪图像，并上传他们。目前我正在使用angular-img-cropper，但它存在一些问题。它不支持在同一页上有多个实例，裁剪后的图像也可以点击。有人能建议我如何在angular或任何其他工具/库/指令中裁剪和上传图像吗？

浏览 0提问于2016-05-01得票数 0

1回答

Django上传多幅图像

、、、、

我需要一些帮助，使用Django将图片上传到服务器。我使用Dropzone.js上传多个图像，使用JCrop裁剪选定的图像。我需要做的是允许用户上传他们的图像，并在同一个页面中显示它们，以裁剪每个图像，然后将它们作为图像列表发送到我的服务器。当我将上传的图像返回到页面时，我会遇到问题，我只想在那一刻显示上传的图像，而不是检索存储在数据库中的所有图像。我该怎么做？提前谢谢。

浏览 0提问于2015-04-30得票数 0

2回答