بشكل عام ، عند معالجة تحميل الصورة ، يتمثل المنطق المعتاد في تحميل الصورة المصدر إلى جانب الخادم ، ثم تقوم لغة جانب الخادم بإجراء عملية التحجيم.
يمكن أن يلبي هذا الوضع عمومًا معظم الاحتياجات ، ولكن عندما تكون الصورة التي نحتاجها مجرد صورة مصغرة للصورة المصدر لحجم محدد ، سيكون استخدام هذا الوضع وسيلة لإضاعة موارد الخادم وعرض النطاق الترددي. لذلك ، نحن نفكر في إنشاء صور صغيرة على المتصفح ثم تحميلها.
// ما يلي هو الكود المصدري
نسخة الكود كما يلي:
وظيفة drawCanvasimage (OBJ ، العرض ، رد الاتصال) {
var $ canvas = $ ('<canvas> </tanvas>') ،
قماش = $ canvas [0] ،
context = canvas.getContext ('2d') ؛
var img = new image () ؛
img.onload = function () {
إذا (العرض) {
إذا (العرض> 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 () ؛
return document.selection.createRange (). text ؛
}
// Firefox
آخر if (window.navigator.useragent.indexof ("firefox")> = 1 || $ .browser.opera || $ .browser.mozilla)
{
if (obj.files && window.url.createBjecturl)
{
إرجاع window.url.createBjecturl (obj.files [0]) ؛
}
إرجاع obj.value ؛
} آخر إذا ($. browser.safari) {
if (window.webkiturl.createBjecturl && obj.files) {
return window.webkiturl.createBjecturl (obj.files [0]) ؛
}
إرجاع obj.value ؛
}
إرجاع obj.value ؛
}
}
وظيفة getFullPath هي الحصول على عنوان الصورة المحددة.
_canvas يحصل على ترميز الصورة المصفولة بـ 64 ، وقم فقط بنقلها إلى الواجهة الخلفية للكتابة إلى الملف.