上传前使用HTML5调整图像大小

我发现了几个不同的post,甚至在回答这个问题的stackoverflow上的问题。 我基本上实现这个职位相同的东西。

所以这是我的问题。 当我上传照片时,我还需要提交表格的其余部分。 这是我的html:

<form id="uploadImageForm" enctype="multipart/form-data"> <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <input id="name" value="#{name}" /> ... a few more inputs ... </form> 

以前,我不需要调整图像大小,所以我的javascript看起来像这样:

 window.uploadPhotos = function(url){ var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ ... handle error... } } }); }; 

这一切都很好…现在我需要调整图像…我怎样才能更换窗体中的图像,以便resize的张贴,而不是上传的图像?

 window.uploadPhotos = function(url){ var resizedImage; // Read in file var file = event.target.files[0]; // Ensure it's an image if(file.type.match(/image.*/)) { console.log('An image has been loaded'); // Load the image var reader = new FileReader(); reader.onload = function (readerEvent) { var image = new Image(); image.onload = function (imageEvent) { // Resize the image var canvas = document.createElement('canvas'), max_size = 1200, width = image.width, height = image.height; if (width > height) { if (width > max_size) { height *= max_size / width; width = max_size; } } else { if (height > max_size) { width *= max_size / height; height = max_size; } } canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(image, 0, 0, width, height); resizedImage = canvas.toDataURL('image/jpeg'); } image.src = readerEvent.target.result; } reader.readAsDataURL(file); } // TODO: Need some logic here to switch out which photo is being posted... var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ ... handle error... } } }); }; 

我想过移动文件input的forms,并有一个隐藏的inputforms,我把价值的大小调整后的图像的值…但我想知道如果我可以只是将图像已经在表格中了。

2 Solutions collect form web for “上传前使用HTML5调整图像大小”

这是我最终做的,它运作得很好。

首先,我移动了表单之外的文件input,以便它不被提交:

 <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <form id="uploadImageForm" enctype="multipart/form-data"> <input id="name" value="#{name}" /> ... a few more inputs ... </form> 

然后,我改变了uploadPhotosfunction只处理大小调整:

 window.uploadPhotos = function(url){ // Read in file var file = event.target.files[0]; // Ensure it's an image if(file.type.match(/image.*/)) { console.log('An image has been loaded'); // Load the image var reader = new FileReader(); reader.onload = function (readerEvent) { var image = new Image(); image.onload = function (imageEvent) { // Resize the image var canvas = document.createElement('canvas'), max_size = 544,// TODO : pull max size from a site config width = image.width, height = image.height; if (width > height) { if (width > max_size) { height *= max_size / width; width = max_size; } } else { if (height > max_size) { width *= max_size / height; height = max_size; } } canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(image, 0, 0, width, height); var dataUrl = canvas.toDataURL('image/jpeg'); var resizedImage = dataURLToBlob(dataUrl); $.event.trigger({ type: "imageResized", blob: resizedImage, url: dataUrl }); } image.src = readerEvent.target.result; } reader.readAsDataURL(file); } }; 

正如你所看到的,我正在使用canvas.toDataURL('image/jpeg'); 改变大小的图像到一个dataUrl,然后我调用函数dataURLToBlob(dataUrl); 把dataUrl转换成一个blob,然后我可以将它添加到表单中。 当blob被创build时,我触发一个自定义事件。 这里是创buildblob的函数:

 /* Utility function to convert a canvas to a BLOB */ var dataURLToBlob = function(dataURL) { var BASE64_MARKER = ';base64,'; if (dataURL.indexOf(BASE64_MARKER) == -1) { var parts = dataURL.split(','); var contentType = parts[0].split(':')[1]; var raw = parts[1]; return new Blob([raw], {type: contentType}); } var parts = dataURL.split(BASE64_MARKER); var contentType = parts[0].split(':')[1]; var raw = window.atob(parts[1]); var rawLength = raw.length; var uInt8Array = new Uint8Array(rawLength); for (var i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], {type: contentType}); } /* End Utility function to convert a canvas to a BLOB */ 

最后,这里是我的事件处理程序,它从自定义事件中获取blob,附加表单然后提交它。

 /* Handle image resized events */ $(document).on("imageResized", function (event) { var data = new FormData($("form[id*='uploadImageForm']")[0]); if (event.blob && event.url) { data.append('image_data', event.blob); $.ajax({ url: event.url, data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ //handle errors... } }); } }); 

如果有兴趣,我已经做了一个打字稿版本:

 interface IResizeImageOptions { maxSize: number; file: File; } const resizeImage = (settings: IResizeImageOptions) => { const file = settings.file; const maxSize = settings.maxSize; const reader = new FileReader(); const image = new Image(); const canvas = document.createElement('canvas'); const dataURItoBlob = (dataURI: string) => { const bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ? atob(dataURI.split(',')[1]) : unescape(dataURI.split(',')[1]); const mime = dataURI.split(',')[0].split(':')[1].split(';')[0]; const max = bytes.length; const ia = new Uint8Array(max); for (var i = 0; i < max; i++) ia[i] = bytes.charCodeAt(i); return new Blob([ia], {type:mime}); }; const resize = () => { let width = image.width; let height = image.height; if (width > height) { if (width > maxSize) { height *= maxSize / width; width = maxSize; } } else { if (height > maxSize) { width *= maxSize / height; height = maxSize; } } canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(image, 0, 0, width, height); let dataUrl = canvas.toDataURL('image/jpeg'); return dataURItoBlob(dataUrl); }; return new Promise((ok, no) => { if (!file.type.match(/image.*/)) { no(new Error("Not an image")); return; } reader.onload = (readerEvent: any) => { image.onload = () => ok(resize()); image.src = readerEvent.target.result; }; reader.readAsDataURL(file); }) }; 

这里是JavaScript的结果:

 var resizeImage = function (settings) { var file = settings.file; var maxSize = settings.maxSize; var reader = new FileReader(); var image = new Image(); var canvas = document.createElement('canvas'); var dataURItoBlob = function (dataURI) { var bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ? atob(dataURI.split(',')[1]) : unescape(dataURI.split(',')[1]); var mime = dataURI.split(',')[0].split(':')[1].split(';')[0]; var max = bytes.length; var ia = new Uint8Array(max); for (var i = 0; i < max; i++) ia[i] = bytes.charCodeAt(i); return new Blob([ia], { type: mime }); }; var resize = function () { var width = image.width; var height = image.height; if (width > height) { if (width > maxSize) { height *= maxSize / width; width = maxSize; } } else { if (height > maxSize) { width *= maxSize / height; height = maxSize; } } canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(image, 0, 0, width, height); var dataUrl = canvas.toDataURL('image/jpeg'); return dataURItoBlob(dataUrl); }; return new Promise(function (ok, no) { if (!file.type.match(/image.*/)) { no(new Error("Not an image")); return; } reader.onload = function (readerEvent) { image.onload = function () { return ok(resize()); }; image.src = readerEvent.target.result; }; reader.readAsDataURL(file); }); }; 

用法如下:

 resizeImage({ file: $image.files[0], maxSize: 500 }).then(function (resizedImage) { console.log("upload resized image") }).catch(function (err) { console.error(err); }); 

或( async / await ):

 const config = { file: $image.files[0], maxSize: 500 }; const resizedImage = await resizeImage(config) console.log("upload resized image") 
  • 使用HTML5 / Canvas / JavaScript进入浏览器屏幕截图
  • 如何创build一个在Bootstrap 3中也可以扩展的响应式图像
  • Chrome 5上的浮点数HTML 5 input type =“number”元素
  • 如何在IE中使用HTML5 canvas元素?
  • Canvas上的addEventListener
  • 防止浏览器在HTML5 History popstate上滚动
  • 我怎样才能使用其父容器进行SVG缩放?
  • 打开HTML5的graphicsvalidation
  • 如何正确alignmentdiv元素?
  • 为什么<big>不在HTML 5 Tag列表中,<Small>是?
  • 通过HTML5中的RTSP或RTPstream式传输