โดยทั่วไปเมื่อประมวลผลอัพโหลดอิมเมจตรรกะปกติคือการอัปโหลดภาพต้นทางไปยังฝั่งเซิร์ฟเวอร์และจากนั้นภาษาข้างเคียงของเซิร์ฟเวอร์จะดำเนินการในการปรับขนาด
โหมดนี้สามารถตอบสนองความต้องการได้มากที่สุด แต่เมื่อภาพที่เราต้องการเป็นเพียงภาพขนาดย่อของภาพต้นทางที่มีขนาดที่ระบุโดยใช้โหมดนี้จะเป็นวิธีการสูญเสียทรัพยากรเซิร์ฟเวอร์และแบนด์วิดท์ ดังนั้นเราจึงพิจารณาสร้างภาพขนาดเล็กบนเบราว์เซอร์แล้วอัปโหลด
// ต่อไปนี้เป็นซอร์สโค้ด
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น DrawCanVasimage (OBJ, ความกว้าง, การโทรกลับ) {
var $ canvas = $ ('<canvas> </anvas>')
canvas = $ canvas [0]
บริบท = canvas.getContext ('2d');
var img = ภาพใหม่ ();
img.onload = function () {
ถ้า (กว้าง) {
if (width> img.width) {
var target_w = img.width;
var target_h = img.height;
}อื่น{
var target_w = ความกว้าง;
var target_h = parseint (target_w/img.width*img.height);
-
}อื่น{
var target_w = img.width;
var target_h = img.height;
-
$ canvas [0] .width = target_w;
$ canvas [0] .height = target_h;
context.drawimage (img, 0,0, target_w, target_h);
_canvas = canvas.todataurl ();
/*console.log(_canvas) ;*/
การโทรกลับ (obj, _canvas);
-
img.src = getfullpath (obj);
-
ฟังก์ชั่น getfullpath (obj)
-
ถ้า (obj)
-
//เช่น
if (window.navigator.useragent.indexof ("msie")> = 1)
-
obj.select ();
ส่งคืน document.selection.createrange (). ข้อความ;
-
// firefox
อื่นถ้า (window.navigator.useragent.indexof ("firefox")> = 1 || $. browser.opera || $. browser.mozilla)
-
if (obj.files && window.url.createObjecturl)
-
ส่งคืน window.url.createObjecturl (obj.files [0]);
-
กลับ obj.value;
} อื่นถ้า ($. browser.safari) {
if (window.webkiturl.createObjecturl && obj.files) {
ส่งคืน window.webkiturl.createObjecturl (obj.files [0]);
-
กลับ obj.value;
-
กลับ obj.value;
-
-
ฟังก์ชั่น getfullpath คือการรับที่อยู่ของภาพที่เลือก
_canvas ได้รับการเข้ารหัสรูปภาพที่เข้ารหัส Base64 และเพียงแค่ถ่ายโอนไปยังแบ็กเอนด์เพื่อเขียนไปยังไฟล์