[英]Crop and upload image on client-side without server-side code involve
As title said. 正如标题所说。 The requirement is to be able to crop an image before uploading the cropped image to the server.
要求是能够在将裁剪后的图像上传到服务器之前裁剪图像。 All the work should be done on the client-side.
所有工作都应该在客户端完成。 I have heard of the method to crop the image on the server and save it altogether.
我听说过在服务器上裁剪图像并完全保存的方法。
But as i use Parse.com service. 但是因为我使用Parse.com服务。 There is no supported for image manipulation on the server-side so i need to process it locally and upload the finished image directly to Parse.com service.
服务器端不支持图像处理,因此我需要在本地处理它并将完成的图像直接上传到Parse.com服务。
Example code would be very helpful. 示例代码非常有用。 Thanks.
谢谢。
The solution i used: 我使用的解决方案:
First I use a 3rd party javascript library to select the crop area like jCrop. 首先,我使用第三方JavaScript库来选择像jCrop这样的裁剪区域。 Once i got the coordinates (x1,x2,y1,y2), i draw a copy of an image to a canvas.
一旦我得到坐标(x1,x2,y1,y2),我就会将一个图像副本绘制到画布上。
var canvas = document.getElementById('drawcanvas');
var context = canvas.getContext('2d');
canvas.width = canvas.width; // clear canvas
var imageObj = new Image();
imageObj.onload = function() {
// draw cropped image
// ...
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, sourceWidth, sourceHeight);
var dataURL = canvas.toDataURL();
};
imageObj.src = // image url
After i drew the canvas, i converted the canvas to a DataURL which is in base64 format. 在我绘制画布后,我将画布转换为基本64格式的DataURL。 Once i've got the DataURL, i use this function i found from the internet where it converts the DataURL to raw binary data.
一旦我有了DataURL,我就会使用这个从互联网上找到的函数,它将DataURL转换为原始二进制数据。
DataURLConverter: function(data) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs
var byteString = atob(data.split(',')[1]);
// separate out the mime component
var mimeString = data.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return ia;
}
When we got the binary data, we then upload this directly to Parse.com. 当我们得到二进制数据时,我们将其直接上传到Parse.com。 Upload to parse with 'ia' as a data
上传以使用'ia'作为数据进行解析
var serverUrl = 'https://api.parse.com/1/files/' + fileName;
$.ajax({
type: "POST",
beforeSend: function(request) {
request.setRequestHeader("X-Parse-Application-Id", "App id");
request.setRequestHeader("X-Parse-REST-API-Key", "API Key");
request.setRequestHeader("Content-Type", "File type");
},
url: serverUrl,
data: ia,
processData: false,
contentType: false,
success: function(data) {
},
error: function(data) {
}
});
OK, I finally made it!!! 好的,我终于成功了! after searching for a whole day!!
搜索了一整天!! Even now parse propose server side cropping, it's still interesting to have client side resizing.
即使现在解析建议服务器端裁剪,客户端调整大小仍然很有趣。
Check this: HTML5 Pre-resize images before uploading 检查: HTML5在上传之前预先调整图像大小
Justin Levene's correction works really good! Justin Levene的修正效果非常好! But to work with Parse.com, you need to use
但要与Parse.com合作,您需要使用
new Parse.File(name, {base64: somebase64string});
These codes works for me (for exemple, I uploaded a 2M photo, the re-sized photo would be like 150k): 这些代码适用于我(例如,我上传了一张2M照片,重新调整大小的照片就像150k):
var dataurl = canvas.toDataURL("image/jpeg");
var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataurl.substring(23)});
parseFile.save().then(function() { ....
the "23" is all the letters before the real base64 string. “23”是真正的base64字符串之前的所有字母。 the result of dataurl is "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2......", we just need the part begin by "/9j/"
dataurl的结果是“data:image / jpeg; base64,/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2 ......”,我们只需要以“/ 9j /”开头的部分
Good luck! 祝好运!
This might be an old post but if you found this answer (like me), you might want to know that Parse allows now to crop images server side. 这可能是一个老帖子,但如果你找到这个答案(像我一样),你可能想知道Parse现在允许裁剪图像服务器端。
For the latest code you should refer to their documentation: https://www.parse.com/docs/cloud_modules_guide#images 有关最新代码,请参阅其文档: https : //www.parse.com/docs/cloud_modules_guide#images
Parse Image Object (from Parse documentation): 解析图像对象(来自Parse文档):
var Image = require("parse-image");
Parse.Cloud.httpRequest({
url: object.get("profilePhoto").url(),
success: function(response) {
// The file contents are in response.buffer.
var image = new Image();
return image.setData(response.buffer, {
success: function() {
console.log("Image is " + image.width() + "x" + image.height() + ".");
},
error: function(error) {
// The image data was invalid.
}
})
},
error: function(error) {
// The networking request failed.
}
});
Crop Image (from Parse documentation): 裁剪图像(来自Parse文档):
// Crop the image to the rectangle from (10, 10) to (30, 20).
image.crop({
left: 10,
top: 10,
right: 30,
bottom: 20,
success: function(image) {
// The image was cropped.
},
error: function(error) {
// The image could not be cropped.
}
});
You can also scale, change image format, and create thumbnails. 您还可以缩放,更改图像格式和创建缩略图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.