什么样的企业需要做网站,做网站如何配置自己的电脑,西安app制作公司,直播平台搭建在开发 H5 应用的时候碰到一个问题#xff0c;应用只需要一张小的缩略图#xff0c;而用户用手机上传的确是一张大图#xff0c;手机摄像机拍的图片好几 M#xff0c;这可要浪费很多流量。获取图片通过 File API 获取图片。var input document.createElement(input);input…在开发 H5 应用的时候碰到一个问题应用只需要一张小的缩略图而用户用手机上传的确是一张大图手机摄像机拍的图片好几 M这可要浪费很多流量。获取图片通过 File API 获取图片。var input document.createElement(input);input.type file;input.addEventListener(change, function() {var file this.files[0];},false);input.click();预览图片可以使用 createObjectURL() 或者 FileReader 预览图片但是我一般用的createObjectURL()方法比较多var img document.createElement(img);img.src window.URL.createObjectURL(file);var img document.createElement(img);var reader new FileReader();reader.onload function(e) {img.src e.target.result;}reader.readAsDataURL(file);使用 canvas 做缩略图var canvas document.createElement(canvas);var ctx canvas.getContext(2d);var MAX_WIDTH 800;var MAX_HEIGHT 600;var width img.width;var height img.height;if (width height) {if (width MAX_WIDTH) {height * MAX_WIDTH / width;width MAX_WIDTH;}} else {if (height MAX_HEIGHT) {width * MAX_HEIGHT / height;height MAX_HEIGHT;}}canvas.width width;canvas.height height;ctx.drawImage(img, 0, 0, width, height);上传缩略图使用HTML5的新API formData来实现图片的ajax上传canvas.toBlob(function(blob) {var form new FormData();form.append(file, blob);fetch(/api/upload, {method: POST, body: form});});