السطوع والتباين لصورة قماش مع جافا سكريبت

Question

لدي صورة في علامة

var img = new Image();
ctx.drawImage(img,0,0,img.width,img.height);
ecc...

كيف يمكن تغيير سطوع وتناقض هذه الصورة مع JavaScript؟

TNX

Answer 1

هناك مكتبة JavaScript واحدة على الأقل أعرفها يمكنها القيام بذلك ، بيكاستيكي

قد يبدو الاستخدام هكذا.

Pixastic.process(canvas, 'brightness',
    {
        'brightness': 60,
        'contrast': 0.5,
        'leaveDOM': true
    },
    function(img) {
        ctx.drawImage(img, 0, 0);
    }
);

المكتبة تهدف إلى العمل مع الصور داخل صفحتك وتحل محلها بعناصر قماش تحتوي على النتيجة المقدمة.

ولكن في الكود أعلاه ، مررت في عنصر قماش بدلاً من صورة وأدرجت خاصية "Leavedom" لمنع مكتبة Pixastic من تبديل قماشك في DOM لإنشاء تلك التي تنشئها.

لعرض النتائج ، قمت بتضمين وظيفة رد الاتصال والتي تقوم فقط ctx.drawImage بوضع المحتويات في اللوحة الأصلية الخاصة بك.

أتمنى أن يكون هذا منطقيًا.

يمكنك التحقق من الوثائق لمزيد من الأمثلة. وثائق pixastic

Answer 2

في تجربتي ، Fabric.js هي أفضل مكتبة JavaScript لأداء هذا. تحقق من النسيج JS وكيفية القيام تصفية الصور على: http://fabricjs.com/image-filters

Answer 3

يمكنك تجربة هذا ، انظر التعليق

<script type="application/javascript">  

function clickMeEvent(obj)
{
if (obj.style.opacity=="0.9")
    {
    obj.style.opacity="0.7";
    }
else if (obj.style.opacity=="0.7")
    {
    obj.style.opacity="0.5";        
    }
else if (obj.style.opacity=="0.5")
    {
    obj.style.opacity="0.3";        
    }
else if (obj.style.opacity=="0.3")
    {
    obj.style.opacity="0.1";        
    }
else
    {
    obj.style.opacity="0.0";

    }
}

</script>

Answer 4

يمكنك تجربة هذا (رمز C#):

 Bitmap originalImage;
 Bitmap adjustedImage;
 double brightness = 1.0f; // no change in brightness
 double constrast = 2.0f; // twice the contrast
 double gamma = 1.0f; // no change in gamma

 float adjustedBrightness = brightness - 1.0f;
 float[][] ptsArray ={
                new float[] {contrast, 0, 0, 0, 0}, // scale red
                new float[] {0, contrast, 0, 0, 0}, // scale green
                new float[] {0, 0, contrast, 0, 0}, // scale blue
                new float[] {0, 0, 0, 1.0f, 0}, // don't scale alpha
                new float[] {adjustedBrightness, adjustedBrightness, adjustedBrightness, 0, 1}};

 imageAttributes = new ImageAttributes();
 imageAttributes.ClearColorMatrix();
 imageAttributes.SetColorMatrix(new ColorMatrix(ptsArray), ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
 imageAttributes.SetGamma(gamma, ColorAdjustType.Bitmap);
 Graphics g = Graphics.FromImage(adjustedImage);
 g.DrawImage(originalImage, new Rectangle(0,0,adjustedImage.Width,adjustedImage.Height)
            ,0,0,bitImage.Width,bitImage.Height,
 GraphicsUnit.Pixel, imageAttributes);