طلب مساعدة تحويل مصفوفة تحتوي على قيم rgb إلى صورة جافاسكربت

مرحبا..

لدي ملف json يحتوي على مكونات صورة واحدة

size: x*y

type:image

data: rgb values

باستعمال fetch تمكنت من الحصول على المصفوفة التي تحوي على قيم الالوان والآن احتاج إلى تحويل هذه القيم بإستعمال canvas او base64 إلى صورة.

قمت بقراءة البيانات على الشكل التالي :

let content = "رابط-الملف.json"

function loadData() {
    fetch(content)
    .then(
        function (response) {
            return response.json();
        })
    .then(
        function (data) {
            console.log(data.data);
        }
    )
}
loadData(content);

خرج الطرفية

بنية ملف البيانات

{"size": [50, 50], "type": "image", "data": [159, 92,.........]}

تحيتي لكم...

var imageData = ctx.createImageData(w, h);   /// create a canvas buffer (RGBA)
var data = imageData.data;                   /// view for the canvas buffer
var len = data.length;                       /// length of buffer طول البافر
var i = 0;                                   /// cursor for RGBA buffer مؤشر
var t = 0;                                   /// cursor for RGB buffer

for(; i < len; i += 4) {   // المرور على المصفوفةو قراءة القيم و إسنادهم لمصفوفة الصورة
    data[i]     = pixels[t];     /// copy RGB data to canvas from custom array
    data[i + 1] = pixels[t + 1];
    data[i + 2] = pixels[t + 2];
    data[i + 3] = 255;           /// remember this one with createImageBuffer // تجاهل الشفافية

    t += 3;
}
// رسم الصورة على الكانفاس
ctx.putImageData(imageData, 0, 0); /// put data to canvas

*********

ولإنشاء Canvas

<canvas id="myCanvas" width="200" height="100"></canvas> 
<!-- ضع الأبعاد التي تناسبك --> 

// في جافاسكربت \
// الوصول للكانفاس
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 

المرور على مصفوفة الألوان
var r,g,b; 
var image = data.data; // نسخ بيانات الصورة
var rgbdata = 0; // مؤشر على مصفوفة الألوان
for(var i=0; i< width; i++){ 
	for(var j=0; j< height; j++){   
		r = image [rgbdata++]; // قراءة الألوان
		g = image [rgbdata++];	 
		b = image [rgbdata++];		 
		ctx.fillStyle = "rgba("+r+","+g+","+b+", 1)";   // تهيئة الرسم
		ctx.fillRect( j, i, 1, 1 ); // تلوين بكسل واحد
	} 
}

الشيفرة ترسم 1 بكسل في كل 1 بكسل من الكانفاس

i و j هم متغيرات تتحرك على الصورة فيما أن rgb data هو مؤشر يتحرك على مصفوفة الألوان

تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

91 ألف متابع

طلب مساعدة تحويل مصفوفة تحتوي على قيم rgb إلى صورة جافاسكربت

التعليقات

اقرأ أيضًا

تطوير الويب