上傳圖片畫布jquery

對於一些依賴項，我必須上傳到服務器圖像670 X 525像素（無論是用戶上傳的圖像的原始大小）。這樣的想法是平局圖像到畫布上傳圖片畫布jquery

canvasContext.drawImage(0, 0, myimageSelector.naturalWidth, myimageSelector.naturalHeight, 0, 0, 670, 525);

轉換成團塊然後上傳團塊服務器在畫布和它的工作。

var dataUrl= mycanvasSelector.toDataUrl('image/png'); 
var blob = convertDataUrlToBlob(dataUrl); 
// upload blob as image 
...

但是，當我看着上傳的圖片在服務器上我注意到，圖像大小至少5倍相比於原始圖像的大小增加。上傳前有沒有想過要減小尺寸？謝謝

來源

2016-06-12 nemrrached

是的，使用File API，那麼你可以使用canvas element處理圖像。

This Mozilla Hacks blog後期將引導您完成大部分流程。以下是博客文章中彙編的源代碼：

// from an input element 
var filesToUpload = input.files; 
var file = filesToUpload[0]; 

var img = document.createElement("img"); 
var reader = new FileReader(); 
reader.onload = function(e) {img.src = e.target.result} 
reader.readAsDataURL(file); 

var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0); 

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; 
var ctx = canvas.getContext("2d"); 
ctx.drawImage(img, 0, 0, width, height); 

var dataurl = canvas.toDataURL("image/png"); 

//Post dataurl to the server with AJAX

來源

2016-06-12 21:54:01 Ritwick

上傳圖片畫布jquery

回答

相關問題