!DOCTYPE html  html  head  meta charset= UTF-8  meta name= viewport content= width=device-width, initial-scale=1, maximum-scale=1  title lianxi /title  style type= text/css  /style  /head  body  form  名字： input type= text name = username id = username /  上傳： input type= file name = fileimage id = fileimage /  /form  button button /button  script  var file = document.querySelector( #fileimage ) var username = document.querySelector( #username ) var canvas = document.createElement( canvas  var span = document.createElement( span ) var formData = new FormData() file.addEventListener( change ,function() { //實現的原理的new formData()然后把這個formData 用ajax傳進去 span.innerHTML = 預覽圖加載中...  document.body.appendChild(span) console.log(file.files[0]) username.value ? formData.append( username ,username.value) : null; resize(file.files[0]); //上傳前的圖片壓縮 function resize(file) { var reader = new FileReader() reader.readAsDataURL(file) var img = new Image() reader.onload = function (e) { // this.result就是圖片的base64地址信息 img.src = this.result; var context = canvas.getContext( 2d  var gif = document.createElement( img ) // base64地址圖片加載完畢后 img.onload = function () { // 圖片原始尺寸 //定義畫布的大小 if (img.width 300 || img.height 300) { if (img.width img.height) { canvas.width = 300 canvas.height = img.height / img.width * 300 else { canvas.height = 300 canvas.width = img.width / img.height * 300 //從那里開始截取圖片 context.drawImage(img, 0, 0, canvas.width, canvas.height) /*第一個參數是創建的img對象；第二個參數是左上角坐標，后面兩個是畫布區域寬高*/ //壓縮后的圖片base64 url /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默認值是 image/jpeg  * qualityArgument表示導出的圖片質量，只要導出為jpg和webp格式的時候此參數才有效果，默認值是0.92*/ //var newUrl = canvas.toDataURL( image/jpeg , 0.92);//base64 格式 document.body.removeChild(span) document.querySelector( body ).appendChild(canvas) //這是上傳的 document.querySelector( button ).addEventListener( click ,function(){ canvas.toBlob(function(blob){ var xhr = new XMLHttpRequest() formData.append( fileimage , blob, 002.webp ) xhr.open( POST , test.php , true)//默認true 為異步 //上傳進度 xhr.upload.addEventListener( progress ,function (e) { console.log( 上傳進度為： + (e.loaded/e.total*100).toFixed(2)+ % )//多次出現 // event.total是需要傳輸的總字節，event.loaded是已經傳輸的字節 xhr.upload.addEventListener( loadstart , function () { console.log( 上傳開始 )//只出現一次 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status = 200 xhr.status 300 || xhr.status == 304) { console.log(JSON.parse(xhr.responseText))//成功后的返回值 else { console.log( Request was unsuccessful: + xhr.status); //xhr.setRequestHeader( Content-type , multipart/form-data  xhr.send(formData) }, image/webp ,0.9) /script  /body  /html 

需要注意的是后端需要加上header( Access-Control-Allow-Origin:* 以實現跨域

相關鏈接：

html5+canvas實現圖片的壓縮上傳

HTML5 Canvas 實現本地壓縮圖片

HTML5 canvas實現圖片拉伸、壓縮與裁剪

以上就是HTML5聯合canvas實現圖片壓縮的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。