Oracle APEX上传图片前端压缩

[[Oracle APEX]]

场景

apex在上传图片时，因图片过大导致上传预览访问过慢。

操作

1
2
3
4


graph TD;
	选择图片canvas预览图片并生成base64数组-->botton触发ajax将base64数组串传至后台;
	botton触发ajax将base64数组串传至后台-->后台将数组还原成字符串再还原成blob类型数据;
	后台将数组还原成字符串再还原成blob类型数据-->存储至集合中备用;

选择图片canvas预览图片并生成base64数组

OsXM1-2024-09-10-11-00-14 OsXM1-2024-09-10-10-41-38

表单-JS全局函数和变量

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


const MAX_WIDTH = 700; 
const MAX_HEIGHT = 400; 
//const MIME_TYPE = "image/jpeg"; 
const QUALITY = 0.7; 
// var input = document.getElementById("P85_IMAGE"); 
var dataurl , x_f01 , file_type, file_name 
function calculateSize(img, maxWidth, maxHeight) { 
	let width = img.width; 
	let height = img.height; 
	if (width > height) { 
		if (width > maxWidth) { 
		height = Math.round((height * maxWidth) / width); 
		width = maxWidth; 
		}
	} else { 
		if (height > maxHeight) { 
			width = Math.round((width * maxHeight) / height); 
			height = maxHeight; 

		} 
	} 
	return [width, height]; 
}

表单-文件页项change事件
OsXM1-2024-09-10-10-45-54

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


const file = this.triggeringElement.files[0];
file_type = file.type
file_name = file.name
const blobURL = URL.createObjectURL(file);
const img = new Image();
img.src = blobURL;
img.onerror = function () {
	URL.revokeObjectURL(this.src);
	console.log("Cannot load image");
};
img.onload = function () {
	URL.revokeObjectURL(this.src);
	const [newWidth, newHeight] = calculateSize(img, MAX_WIDTH, MAX_HEIGHT);
	const canvas = document.createElement("canvas");
	canvas.width = newWidth;
	canvas.height = newHeight;
	const ctx = canvas.getContext("2d");
	ctx.drawImage(img, 0, 0, newWidth, newHeight);
	dataurl = canvas.toDataURL(file_type,'05');
	dataurl = dataurl.substr(dataurl.indexOf(',') + 1);
	x_f01 = apex.server.chunk(dataurl);

	const currentCanvas = document.getElementById("showimage").querySelector("canvas");
	if (currentCanvas) {

		currentCanvas.remove();
	}
	document.getElementById("showimage").append(canvas);
};

botton触发ajax将base64数组串传至后台

OsXM1-2024-09-10-10-49-50

表单-ajax保存图片并触发其页面提交

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


// canvas
// console.log(dataurl)
// console.log('-------')
// var item_page_id = $v('P88_PAGE_ID');
// console.log(x_f01)

if (!apex.jQuery.isArray(x_f01)) {
	x_f01 = [x_f01];
}

apex.server.process("SAVE_IMAGE_TO_COLL", {
	f01: x_f01,
	x01: 'save',
	x02: file_type,
	x03: file_name
}, {

	success: function (data) {
		apex.page.submit("CREATE"); // 触发原始提交
		// apex.navigation.dialog.close( true ,{dialogPageId: item_page_id}); // 触发关闭对话框
	},
	error: function (jqXHR, textStatus, errorThrown) {

	}
})

后台将数组还原成字符串再还原成blob类型数据 - 存储至集合中备用

OsXM1-2024-09-10-10-50-56

ajax保存图片处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


-- ajax 处理名 SAVE_IMAGE_TO_COLL
DECLARE
	v_clob          clob           := '';
	l_blob          blob;
	l_flag          varchar2(1000);
	P_Directory_obj varchar2(2000) := :GLOBAL_UPLOAD_DIR_OBJ; -- 从全局变量中获取文件对象
BEGIN
	dbms_lob.createtemporary(v_clob, TRUE);
	APEX_COLLECTION.CREATE_OR_TRUNCATE_COLLECTION(
			p_collection_name => 'SAVE_IMAGE_TO_COLL'
	);
	FOR i IN 1..APEX_APPLICATION.G_F01.COUNT
		LOOP
			dbms_lob.append(v_clob, APEX_APPLICATION.G_F01(i));
		END LOOP;

	l_blob := apex_web_service.clobbase642blob(v_clob);


	APEX_COLLECTION.ADD_MEMBER(
			p_collection_name => 'SAVE_IMAGE_TO_COLL',

			p_c001 =>     APEX_APPLICATION.G_x01,
					p_c002 =>     APEX_APPLICATION.G_x02,
					p_c003 =>     APEX_APPLICATION.G_x03,
			p_blob001 => l_blob
	);
	apex_json.open_object; -- {
	apex_json.write('status', '0'); -- "obj-attr": "value"
	apex_json.write('url', 'l_next_url');
	apex_json.write('errMessage', '我是错误信息!');
	apex_json.close_all; -- }}
END;

数据保存后将图片转存到磁盘中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


DECLARE
	P_Directory_obj  varchar2(2000) := :GLOBAL_UPLOAD_DIR_OBJ; -- 从全局变量中获取文件对象
	P_HashFilename   varchar2(400);
	P_SourceFilename varchar2(400);
	l_flag           varchar2(400);
	v_file_type      varchar2(400);
BEGIN
	FOR atf IN (
		SELECT SEQ_ID,
			c001                                                request_type,
			c002 AS                                             文件类型,
			c003 AS                                             文件名,
			BLOB001,
			ROUND(DBMS_LOB.GETLENGTH(BLOB001) / 1024 / 1024, 2) len
		FROM APEX_COLLECTIONS atf
		WHERE atf.collection_name = 'SAVE_IMAGE_TO_COLL'

		) -- 附件多选
		LOOP
			-- 1.依据页项获取hash文件名和文件名
			P_SourceFilename := atf.文件名;

			v_file_type := SUBSTR(P_SourceFilename, INSTR(P_SourceFilename, '.', -1));
			P_HashFilename := SYS.DBMS_CRYPTO.HASH(UTL_I18N.STRING_TO_RAW(atf.文件名,
																		'AL32UTF8'),
												DBMS_CRYPTO.HASH_SH1) || SYS_GUID() || v_file_type;


			IF atf.request_type = 'SAVE' THEN
				l_flag := 1;
			END IF;
			-- UploadFilePackageV2.GenerateHashFileName(atf.NAME,
			--                                          P_HashFilename,
			--                                          P_SourceFilename);
			-- 2.将二进制从apex_application_temp_files临时表转存到服务器磁盘上依据hash后的名字
			UploadFilePackageV2.WriteBlobToUploadFile(P_HashFileName => P_HashFilename,
													P_FileBlob => atf.BLOB001,
													P_DirObject => P_Directory_obj);
			-- 3.记录本次上传的记录 fk, 文件名,hash文件名,mime_type
			INSERT INTO DEMO666_FILE (TABLE_NAME, fk_id, ATTACHMENT_FILENAME, ATTACHMENT_FILENAME_hash, ATTACHMENT_MIMETYPE, REMARK,
									Attachment_Length)
			VALUES ('EMPLOYEES', :P85_ID, P_SourceFilename, P_HashFilename, atf.文件类型, :P49_REMARK, atf.len);
		END LOOP;
			APEX_COLLECTION.TRUNCATE_COLLECTION(
		p_collection_name => 'SAVE_IMAGE_TO_COLL');
END;