Secara umum, saat memproses unggahan gambar, logika yang biasa adalah mengunggah gambar sumber ke sisi server, dan kemudian bahasa sisi server melakukan pengoperasian penskalaan.
Mode ini umumnya dapat memenuhi sebagian besar kebutuhan, tetapi ketika gambar yang kita butuhkan hanyalah thumbnail dari gambar sumber dari ukuran yang ditentukan, menggunakan mode ini akan menjadi cara untuk membuang sumber daya server dan bandwidth. Oleh karena itu, kami mempertimbangkan untuk menghasilkan gambar kecil di browser dan kemudian mengunggahnya.
// Berikut ini adalah kode sumber
Salinan kode adalah sebagai berikut:
function drawCanvasimage (obj, lebar, callback) {
var $ canvas = $ ('<Canvas> </an canvas>'),
Canvas = $ Canvas [0],
konteks = canvas.getContext ('2d');
var img = gambar baru ();
img.onload = function () {
if (lebar) {
if (width> img.width) {
var target_w = img.width;
var target_h = img.height;
}kalau tidak{
var target_w = lebar;
var target_h = parseInt (target_w/img.width*img.height);
}
}kalau tidak{
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);*/
callback (obj, _canvas);
}
img.src = getfullpath (obj);
}
fungsi getfullpath (OBJ)
{
if (obj)
{
//yaitu
if (window.navigator.useragent.indexof ("msie")> = 1)
{
obj.select ();
return document.selection.createrange (). Teks;
}
// Firefox
lain if (window.navigator.useragent.indexof ("firefox")> = 1 || $ .browser.opera || $ .browser.mozilla)
{
if (obj.files && window.url.createObjecturl)
{
return window.url.createObjecturl (obj.files [0]);
}
mengembalikan obj.value;
} lain jika ($. browser.safari) {
if (window.webkiturl.createObjecturl && obj.files) {
return window.webkiturl.createObjecturl (obj.files [0]);
}
mengembalikan obj.value;
}
mengembalikan obj.value;
}
}
Fungsi Getfullpath adalah untuk mendapatkan alamat gambar yang dipilih.
_Canvas Mendapat pengkodean gambar yang dikodekan base64, dan hanya mentransfernya ke backend untuk menulis ke file.